不是跨域的跨域

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

因?yàn)樵趩雾?yè)面應(yīng)用中，前端項(xiàng)目可以單獨(dú)通過(guò) node 啟動(dòng)，它單獨(dú)占用一個(gè)端口，后端項(xiàng)目啟動(dòng)后也是另外一個(gè)端口，此時(shí)從前端發(fā)送請(qǐng)求到后端，由于兩者處于不同的端口之上，因此必然存在一個(gè)跨域問(wèn)題。

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

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

因此，解決這個(gè)所謂的 “跨域” 問(wèn)題，我們不能按照傳統(tǒng)的思路來(lái)（通過(guò) JSONP 或者 CORS），因?yàn)樵陧?xiàng)目真正上線后，所謂的跨域問(wèn)題可能就會(huì)消失。

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

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

vue-cli2 方案

如果我們使用的 vue-cli2 來(lái)創(chuàng)建的 SPA 應(yīng)用，創(chuàng)建成功之后，在項(xiàng)目的 config 目錄下有一個(gè) index.js 文件，在這個(gè)文件中，我們可以進(jìn)行請(qǐng)求轉(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ā)路由表。這個(gè)里邊我們一共配置了兩個(gè)規(guī)則：

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

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

相對(duì)來(lái)說(shuō)，vue-cli2 在這里的配置還比較容易。

vue-cli3 方案

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

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

 

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

一開始我直接把 vue-cli2 中的請(qǐng)求轉(zhuǎn)發(fā)配置拷貝過(guò)來(lái)，這樣發(fā)送 HTTP 請(qǐng)求倒是沒(méi)問(wèn)題，但是 websocket 請(qǐng)求一直有問(wèn)題，后來(lái)經(jīng)過(guò)仔細(xì)分析，發(fā)現(xiàn)這兩者在請(qǐng)求轉(zhuǎn)發(fā)配置上有一點(diǎn)點(diǎn)差異，我們來(lái)看看 vue-cli3 中的請(qǐng)求轉(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)建一個(gè) proxyObj 用來(lái)放各種代理對(duì)象，至于代理的內(nèi)容這里的則和 vue-cli2 中的沒(méi)有太多差異。要注意的是，HTTP 請(qǐng)求代理中，多了一個(gè)屬性 ws: false，用過(guò) vue-cli3 同學(xué)可能發(fā)現(xiàn)了，如果不加這個(gè)屬性，瀏覽器控制臺(tái)會(huì)一直報(bào)連不上 socket 的錯(cuò)，加上就沒(méi)事了。

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