proxy 配置代理——解决的跨域问题

一. 发送 ajax 请求的方式

1. xhr(XMLHttpRequest)：xhr.open()、xhr.send()
2. jQuery：封装了 XHR，体积小，支持请求、响应拦截器
3. axios：封装了 XHR，vue 官方推荐
4. fetch：跟 xhr 平级，但是对 IE 浏览器的兼容性不好

二. 跨域产生的原因

当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作跨域。

三. 对跨域的误解

当浏览器向服务器发起请求时，即使存在跨域问题，服务器依旧是会响应请求，并返回数据给浏览器，但当浏览器拿到数据后发现存在跨域问题了，这时候浏览器就不会将数据给页面，相当于把数据给扣留了（如下图）。

并不是说，发生跨域时请求根本就发不出去，或者服务器拿到请求不会响应啥的，这些都是错误的想法（我之前就是这么觉得的）。

​​

四. 跨域的解决办法

1. cors：服务器端配置，不用前端配置 (真正意义上的解决跨域)
2. jsonp：利用 script 标签的 src 属性不受同源策略限制的特点，但只能解决 get 请求，需前后端配合
3. 代理服务器：与前端页面同源，由他返回的数据就不存在跨域的问题，如图。 （备注：代理服务器与服务器之间是非同源，但不存在跨域问题，是因为服务器之间采用的是 http 请求，而不是 ajax 技术）

​​

五. 配置代理服务器：

1. nginx （相对繁琐，且需要一定的后端知识）
2. proxy： （相对简单，熟悉一定的 webpack 配置即可） 配置单个代理：

// vue.config.js/webpack.config.js 
// 优点：配置简单 
// 缺点：不能灵活控制请求是否走代理，因为都会走代理 
module.exports={
     devServer:{
         proxy:'http://xxx.xxx.xxx:5000' 
     } 
}

配置多个代理：

// vue.config.js/webpack.config.js 
// 优点：可以配置多个代理，且可灵活控制请求是否走代理 
// 缺点：配置繁琐，发起代理请求时必须加上配置好的前缀
module.exports={
    devServer:{
        proxy:{
            '/api01':{
                target:'http://xxx.xxx.xxx:5000',
                changeOrigin:true,
                // 重写请求，根据接口详情，判断是否需要
                pathRewrite:{
                    '^/api01':''
                }
            },
            '/api02':{
                target:'http://xxx.xxx.xxx:5001',
                changeOrigin:true,
                // 重写请求，根据接口详情，判断是否需要
                pathRewrite:{
                    '^/api02':''
                }
            }
        }
    }
}
// changeOrigin设置为true时，服务器收到的请求头的host与服务器地址相同
// changeOrigin设置为false时，服务器收到的请求头的host与前端地址相同

备注

原文地址 https://juejin.cn/post/6991353535442976799