Vue 項目如何配置代理解決跨域

是什么是跨域？

由於瀏覽器的同源策略（SOP: same origin policy）的存在，只有協議、域名和端口三者都相同的情況下，相互之間才可以進行交互，任何一個不同，哪怕是同一域名下不同端口，也無法正常交互，這便是跨域；

解決跨域的方法有哪些？

常見的解決跨域的方案有JSONP（jsonp的原理是動態插入script標簽），node.js中間件解決跨域，nginx代理跨域，WebSocket協議跨域等

（詳情參考：https://segmentfault.com/a/1190000011145364?utm_source=tag-newest）

 

在Vue 3.0項目中，可以通過如下配置解決跨域：

在根目錄下新建一個  vue.config.js 文件  （ps:  2.0版本下有該文件，直接修改，3.0版本需要新建該文件）

module.exports = {
    //相當於webpack-dev-server,  對本地服務器進行配置
    devSever : {
         proxy:  {
            "/api" : {
                 target: " http://localhost:3000 ",   //需要跨域的目標url ,我這里是自己本地起的一個服務端口
                 changeOrigin: true,           // 將基於名稱的虛擬托管網站的選項，如果不配置，請求會報404
                 ws:  true,
                 pathRewrite: {
                     " ^/api " :  ""          //若請求的路徑在目標url下但不在/api 下，則將其轉換成空
                 }     
            }
        }
    }      
}