vue-cli3構建專案跨域解決方案

暴走的snail發表於2019-01-11
Vue跨域

    前後端分離開發給我帶來很多的便利，無論是前端同學還是後端同學對於此種開發方式都是舉雙手贊成的。因為這樣我們後端同學不用被css js這一大堆的前端程式碼折磨了，前端也不用改個樣式要開個後臺服務。雖然如此方便，但對於前端還是有些問題需要解決的。比如跨域問題，今天在專案中本地區域網測試移動端，手機瀏覽器開啟會出現跨域（pc端跨域已通過chrome設定解決了）。

1.瀏覽器設定跨域 

  在PC端開發，chrome瀏覽器是我們前端必不可少的開發工具，用chrome解決跨域簡單粗暴。

1)右鍵chrome選擇屬性

2）選擇快捷方式

vue-cli3構建專案跨域解決方案

3)在目標後面空格 加上 --disable-web-security --user-data-dir=C:\(--user-data-dir是自定義目錄)

開啟瀏覽器，輕鬆解決跨域問題

2.vue配置檔案設定代理

 在用vue-cli3構建的前端專案中有vue.config.js檔案，在其中新增如下程式碼

devServer: {   proxy: {        '/apis': {    //將www.example.com對映為/apis
            target: 'https://www.example.com',  // 介面域名
            secure: false,  // 如果是https介面，需要配置這個引數
            changeOrigin: true,  //是否跨域
            pathRewrite: {
                '^/apis': ''   //需要rewrite的,
            }              
        }
  }}複製程式碼

詳情請參考文章

3.後臺設定允許跨域

  這種方法是我認為最方便的方法，由伺服器決定是否允許跨域，如果允許，伺服器會在響應頭中設定欄位來告訴瀏覽此次請求合法，則瀏覽器不會將請求包丟棄，從而完成跨域。再次舉個nodejs伺服器的栗子：

//設定跨域訪問
app.all('*',function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
    if (req.method == 'OPTIONS') {
        res.send(200); /讓options請求快速返回/
    }
    else {
        next();
    }
});複製程式碼

4.設定伺服器代理（此處只給出實現方案）

   此種方法適用於適應多平臺的大型專案，這種方式實際就是將前端ajax請求的地址通過伺服器訪問。前端程式碼執行在nodejs中層層的伺服器上，nodejd只負責執行前端程式碼和轉發前端請求。例如example.org/index 頁面需要訪問api.test.com/getNews 來獲取最新新聞，我們可以通過在example.org的伺服器上面多增加一個介面 kangbiao.org/api?url=api.weibo.com/getNews ，然後再伺服器內部，該介面所做的事情就是向api.weibo.com/getNews 發起請求即可，然後將結果返回。

這種方式如果是單類平臺不建議使用，維護成本比較高。


相關文章