前端配置跨域代理

跨域时对于前后端开发中一个非常常见的问题，当我们客户端向我们的服务器请求接口数据的时候，我们可以请求到服务器当中的数据，但是我们把数据返回我们的客户端的时候就会产生跨域问题

所以，跨域是针对我们浏览器设置一个安全策略，就是当我们的协议，域名和端口只要有一个不同，那么就会产生跨域问题，也被称为同源策略

大多数的请求下，我们只需要在后端配置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 服务。