老實(shí)說，前后端分離其實(shí)并不難，前后端分離之后，Java 工程師只需要專心寫頁面就可以了，在我看來工作可比以前輕松多了。

如果讓一個(gè)專業(yè)的前端工程師來寫前端頁面，其實(shí)也不難，Vue 算是三大前端框架中最容易上手的了。

那怎么樣就有難度了呢？

讓同一個(gè)人既寫前端又寫后端！

我知道很多小伙伴在這里總是想不通，很多人問的最多的問題就是前后端是怎么通信的？跨域是怎么解決的？剛好松哥最近在這里踩了個(gè)坑，就來和大家聊一聊這個(gè)問題。

不是跨域的跨域

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

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

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

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

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

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

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

vue-cli2 方案

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

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

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

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

vue-cli3 方案

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

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

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

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

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

這就是我們在 vue-cli3 中請求的配置。

不過這里的配置老實(shí)說沒有什么難度，做過一次就會(huì)啦，要是沒做過，頭一次可能得折騰半天。

結(jié)語

很多小伙伴一直對于前后端分離開發(fā)，前后端請求是如何對接的一直有疑問，希望這篇文章能夠給你一些啟發(fā)。