vue-cli3構建項目跨域解決方案

    先後端分離開發給我帶來不少的便利，不管是前端同窗仍是後端同窗對於此種開發方式都是舉雙手同意的。由於這樣咱們後端同窗不用被css js這一大堆的前端代碼折磨了，前端也不用改個樣式要開個後臺服務。雖然如此方便，但對於前端仍是有些問題須要解決的。好比跨域問題，今天在項目中本地局域網測試移動端，手機瀏覽器打開會出現跨域（pc端跨域已經過chrome設置解決了）。

1.瀏覽器設置跨域 

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

1)右鍵chrome選擇屬性

2）選擇快捷方式

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 發起請求便可，而後將結果返回。

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