跨域產生的原因及解決方法

（一）跨域的問題的出現肯定是因為請求數據時產生的，產生的原因是因為一下三點：

http:  //  www.baidu.com    :8080/   /dir/index.html

協議     域名                       80端口,可省

1.域名不同
2.協議不同
3.端口不同

（二） 這里解決的辦法是利用http-proxy-middleware 代理解決（項目使用vue-cli腳手架搭建）

devServer:{
    proxy:{
       "/api":{
             target:"https://****.com" //數據接口的地址 
             changeOrigin:true,  // 允許跨域 
             secure:false, // 允許運行在https上   
             pathRewrite: { //如果你不想總是傳遞 /api,可以重寫路徑
                  '^/api': ''
             }   
        }
         
    }

 

然后就是把上圖的target改成你的接口地址前面的那部分就好了，底下的^/api就是把前面那些替代成空字符串，接口就寫替代的后面那部分路由地址就好了，不過我推薦不要用‘/api’還是用‘’空字符串代替，畢竟你前端代理在路由前面加了/api。在本地瀏覽器前面會替代的那部分會顯示為localhost，其原理就是解決跨域問題中的設置代理