跨域时对于前后端开发中一个非常常见的问题,当我们客户端向我们的服务器请求接口数据的时候,我们可以请求到服务器当中的数据,但是我们把数据返回我们的客户端的时候就会产生跨域问题
所以,跨域是针对我们浏览器设置一个安全策略,就是当我们的协议,域名和端口只要有一个不同,那么就会产生跨域问题,也被称为同源策略
大多数的请求下,我们只需要在后端配置cors就可以解决跨域问题,也就是我们需要依赖后端才能解决跨域问题,cors是一种机制,该机制就是使用http头来告诉我们浏览器,允许运行在一个源上的web应用访问不同源上的资源,除了cors方案外,还可以配置代理来解决跨域问题
前端配置跨域代理有来个那种方式
使用中间件 http-proxy-middleware 配置跨域代理
安装 http-proxy-middleware
npm install http-proxy-middleware --save-dev
在 src 目录下新建 setupProxy.js 文件
const {createProxyMiddleware} = require('http-proxy-middleware');
module.exports = function (app) {
app.use('/httpServer', createProxyMiddleware({
target: 'http://10.0.0.0:8080',//后端服务器地址
changeOrigin: true,
pathRewrite: {
'^/httpServer': 'http://localhost:3000',//本地地址
},
}))
}
实现原理是使用 http-proxy-middleware 的 createProxyMiddleware 方法。
其中:target 是服务器地址。changeOrigin 是将主机的源更改为目标URL,默认为 false。pathRewrite 是代理的目标地址。即如果代理到本地,就写本地地址
使用 webpack/dev 配置跨域代理
在使用和配置 webpack 时一般都会安装 webpack-dev-server
在 webpack.config.js 中配置:
module.exports = {
devServer:{
proxy:{
'/appServer':{
target: 'http://10.0.0.0:8080',//后台服务器地址
changeOrigin: true,//target为域名时必须设置此项
secure: false,//设置支持 https 协议的代理
pathRewrite: {
'^/httpServer': 'http://localhost:3000',//本地地址
},
}
}
}
参数说明:
‘/appServer’
捕获 API 的标志,如果 API 中包含 ‘/appServer’ 字符串,就会开始匹配代理。
比如 ‘/appServer/user/login’
target
代理的跨域地址,就是需要被代理的跨域地址。
可以是域名,也跨域是 IP。如果是域名,则需要加上changeOrigin: true,否则代理会失效。
pathRewrite
重写路径,修改原始请求路径。也就是把服务器地址代理同源地址。
secure
不检查安全问题,设置后,可以运行在 HTTP 上,可以使用无效正式的 HTTPS 服务。