Vue 中怎么處理跨域問題

不是跨域的跨域

如果你直接在項目中引入 Vue，像用 jQuery 那樣用 Vue，那沒什么問題，你應(yīng)該也不會有跨域的疑問。但是如果你做的是單頁面應(yīng)用(SPA)，那么必然會有這樣的疑問，跨域問題怎么搞！

因為在單頁面應(yīng)用中，前端項目可以單獨通過 node 啟動，它單獨占用一個端口，后端項目啟動后也是另外一個端口，此時從前端發(fā)送請求到后端，由于兩者處于不同的端口之上，因此必然存在一個跨域問題。

但是大家想想，這個跨域有可能只是在開發(fā)環(huán)境下存在，生產(chǎn)環(huán)境下有可能不存在。因為當(dāng)項目開發(fā)完成之后，我們對前端項目進(jìn)行打包，打包后部署在 Nginx 上或者直接拷貝到后端項目中運行都可以（一般使用前者）：

• 如果是前者，后端接口也通過 Nginx 進(jìn)行映射，這個時候就不會存在跨域問題了
• 如果是后者，那就更簡單了，部署的時候前后端代碼放在一起，更不會有跨域問題了

因此，解決這個所謂的 “跨域” 問題，我們不能按照傳統(tǒng)的思路來（通過 JSONP 或者 CORS），因為在項目真正上線后，所謂的跨域問題可能就會消失。

那么這個問題怎么解決呢？我們可以在前端 nodejs 中配置請求轉(zhuǎn)發(fā)。

配置請求轉(zhuǎn)發(fā)其實不難，不過 vue-cli2 和 vue-cli3 的寫法稍有不同，這也是我前一段時間踩坑的地方。

vue-cli2 方案

如果我們使用的 vue-cli2 來創(chuàng)建的 SPA 應(yīng)用，創(chuàng)建成功之后，在項目的 config 目錄下有一個 index.js 文件，在這個文件中，我們可以進(jìn)行請求轉(zhuǎn)發(fā)配置，如下圖：

 

配置內(nèi)容如下：

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/': {
        target: 'http://localhost:8082',
        changeOrigin: true,
        pathRewrite: {
          '^/': ''
        }
      },
      '/ws/*': {
        target: 'ws://127.0.0.1:8082',
        ws: true
      }
    },
    ...
  }

proxyTable 就是我們配置的轉(zhuǎn)發(fā)路由表。這個里邊我們一共配置了兩個規(guī)則：

• 第一個是攔截所有 HTTP 請求，將之轉(zhuǎn)發(fā)到后端服務(wù)器上（前端默認(rèn)端口是 8080），后端的端口是 8082。至于攔截規(guī)則     / ，大家可以自定義，根據(jù)實際情況來寫，例如所有的 HTTP 請求都有一個統(tǒng)一的前綴 api，那么這里就可以寫     /api。
• 第二個是攔截所有的 websocket 請求進(jìn)行轉(zhuǎn)發(fā)，我這里給所有的 websocket 請求取了一個統(tǒng)一的前綴     /ws

如果你有更多的攔截規(guī)則，繼續(xù)在這里配置就可以了，這些配置只會在開發(fā)環(huán)境下生效，當(dāng)項目編譯打包時，這些配置是不會打包進(jìn)去的，也就是說，項目發(fā)布的時候，這些配置是失效的，這個時候我們通過 Nginx 或者將前端代碼拷貝到后端，就可以解決生產(chǎn)環(huán)境下的跨域問題了（「相當(dāng)于開發(fā)時候的跨域在生產(chǎn)環(huán)境下不存在」）。

相對來說，vue-cli2 在這里的配置還比較容易。

vue-cli3 方案

vue-cli3 去年出來后，當(dāng)時就嘗了一把鮮，但是可能 vue-cli2 用久了，一時半會還不愿意接受 vue-cli3 ，于是嘗鮮完了之后就放下了，沒怎么用了。直到前兩天，新項目嘗試了一下 vue-cli3，結(jié)果在請求轉(zhuǎn)發(fā)這塊就掉坑里了。

一開始沒多想，還是 vue-cli2 里邊的老辦法，只不過是在 vue-cli3 創(chuàng)建的項目的 vue.config.js 文件中進(jìn)行配置，文件位置如下圖：

 

注意，使用 vue-cli3 創(chuàng)建的 SPA 應(yīng)用，沒有 config 目錄了，因此請求轉(zhuǎn)發(fā)的配置我們要在 vue.config.js 這個配置文件中來配置。

一開始我直接把 vue-cli2 中的請求轉(zhuǎn)發(fā)配置拷貝過來，這樣發(fā)送 HTTP 請求倒是沒問題，但是 websocket 請求一直有問題，后來經(jīng)過仔細(xì)分析，發(fā)現(xiàn)這兩者在請求轉(zhuǎn)發(fā)配置上有一點點差異，我們來看看 vue-cli3 中的請求轉(zhuǎn)發(fā)配置(這也是我這里 vue.config.js 文件的完整內(nèi)容)；

let proxyObj = {};
proxyObj['/ws'] = {
    ws: true,
    target: "ws://localhost:8081"
};
proxyObj['/'] = {
    ws: false,
    target: "http://localhost:8081",
    changeOrigin: true,
    pathRewrite: {
        '^/': ''
    }
};
module.exports = {
    devServer: {
        host: 'localhost',
        port: 8080,
        proxy: proxyObj
    }
}

首先我們創(chuàng)建一個 proxyObj 用來放各種代理對象，至于代理的內(nèi)容這里的則和 vue-cli2 中的沒有太多差異。要注意的是，HTTP 請求代理中，多了一個屬性 ws: false，用過 vue-cli3 同學(xué)可能發(fā)現(xiàn)了，如果不加這個屬性，瀏覽器控制臺會一直報連不上 socket 的錯，加上就沒事了。

最后在 devServer 中指定項目的 host 和 port ，然后再配置一下 proxy 對象就可以啦。