vue.config.js 中跨域 proxy 的原理

在讨论 proxy 跨域的原理时，我们要先说说为什么会出现 跨域问题

为什么会出现跨域问题

跨域主要是出于浏览器的同源策略限制。

同源策略是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。
所谓同源（即指在同一个域）就是两个页面具有相同的协议，主机和端口号

什么是跨域

当一个请求 url 的 协议、域名、端口 三者之间任意一个与当前页面url不同即为跨域

当前页面url	被请求页面url	是否跨域	原因
http://www.test.com/	http://www.test.com/index.html	否	同源（协议、域名、端口号相同）
http://www.test.com/	https://www.test.com/index.html	跨域	协议不同（http/https）
http://www.test.com/	http://www.baidu.com/	跨域	主域名不同（test/baidu）
http://www.test.com/	http://blog.test.com/	跨域	子域名不同（www/blog）
http://www.test.com:8080/	http://www.test.com:7001/	跨域	端口号不同（8080/7001）

当我们请求一个接口的时候，出现如：Access-Control-Allow-Origin 字眼的时候说明请求跨域了

vue 中 配置 proxy

vue的转发机制proxyTable，proxyTable代理功能可以实现转发机制,

vue.config.js (点击我去VUE官网查看devserver-proxy的配置 )

module.exports={
   devServer: {
   //设置完成后重启npm
        proxy: {
        	//设置代理
            "/devapi": {
                target: "http://0.0.0.0:3000", // 接口的域名
                changeOrigin: true,
                ws:true,
                pathRewrite: {
                    "^/devapi": ""	//通配符
                }
            }
        },
    },
}

好了，步入正题，proxy 是怎么实现的

首先浏览器是禁止跨域的，但是服务端不禁止，在本地运行 npm run dev 等命令时实际上是用 node 运行了一个服务器，因此 proxyTable 实际上是将请求发给自己的服务器，再由服务器转发给后台服务器，做了一层代理。vue的proxyTable用的是http-proxy-middleware中间件, 因此不会出现跨域问题。