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`中介軟體, 因此不會出現跨域問題。