vue 使用axios 出現跨域請求的兩種解決方法

最近在使用vue axios發送請求，結果出現跨域問題，網上查了好多，發現有好幾種結局方案。
1：服務器端設置跨域
header(“Access-Control-Allow-Origin:*”);
header(“Access-Control-Allow-Headers:content-type”);
header(“Access-Control-Request-Method:GET,POST”);
2：可以自己設置一個代理服務器，使用proxyTable 我比較推薦這種方法。
首先在config/index.js 里面找到proxyTable ：{} ，然后在里面加入

"/api":{

            target: 'http://192.168.3.6:7777',

            changeOrigin: true,

            pathRewrite:{

            '^/api':''

            }

        }

 
注意這里面 /api是你自定義的，寫成什么都可以。

target 設置你調用的接口域名和端口號。

這里理解成用‘^/api’代替target里面的地址，后面組件中我們調接口時直接用api代替 。

比如我要調用’http://47.104.218.122:8087/dictionaryType‘，直接寫‘/api/dictionaryType’即可。
然后我們可以在main.js設置一個基礎路徑，這樣你調用接口的時候可以不寫api,直接寫/接口名稱即可。

在main.js 設置 axios.defaults.baseURL=”/api”;
然后掉接口的時候可以直接寫let _url4=”/dictionaryTypes”;這樣就比較省事。

this.$http.get("/goods/home").then((res) => {

         console.log(res);

 })

################修改了配置文件一定要重啟項目###########

 

問題：Firebug: 已攔截跨源請求：同源策略禁止讀取位於XXX的遠程資源。（原因：CORS 頭缺少 'Access-Control-Allow-

 

第一種，就是在被請求的程序中添加HTTP頭，即CORS跨域（跨域資源共享，Cross-Origin Resource Sharing）

如： Response.Headers.Add("Access-Control-Allow-Origin", "*"); // JSON
{ 'Access-Control-Allow-Origin': '*', } // HTML
<meta http-equiv="Access-Control-Allow-Origin" content="*">
// PHP
header("Access-Control-Allow-Origin: *"); header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

添加此段代碼的目的很簡單，也就是告訴瀏覽器，這個資源是運行遠程所有域名訪問的。當然，此處的也可以替換為指定的域名，出於安全考慮，建議將替換成指定的域名。 
由於IE10以下瀏覽器不支持CORS，所以目前在國內CORS並不是主流的跨域解決方案，但是隨着windows 10的發布，IE的逐漸衰落，可以預見，在不遠的將來CORS將成為跨域的標准解決方案。

第二種，就是在被請求的服務器上，添加HTTP響應頭。在這里，我們就以IIS6.0為例：

 

//在被請求的網站上，設置HTTP頭，添加
"Access-Control-Allow-Origin:*" //值為*或指定的域名。