轉(zhuǎn)自： https://www.cnblogs.com/wancheng7/p/8987694.html

為什么要使用proxyTable

• 很簡單，兩個字，跨域。
• 在平時項目的開發(fā)環(huán)境中，經(jīng)常會遇到跨域的問題，尤其是使用vue-cli這種腳手架工具開發(fā)時，由于項目本身啟動本地服務(wù)是需要占用一個端口的，所以必然會產(chǎn)生跨域的問題。當(dāng)然跨域有多種解決方式，這里就不一一例舉，下次弄篇文章單獨(dú)講，在使用webpack做構(gòu)建工具的項目中使用proxyTable代理實(shí)現(xiàn)跨域是一種比較方便的選擇。

如何使用proxyTable

拿vue-cli舉例。我們首先要在項目目錄中找到根目錄下config文件夾下的index.js文件。由于我們是在開發(fā)環(huán)境下使用，自然而然是要配置在dev里面：

dev: {
  env: require('./dev.env'),
  port: 8080,
  autoOpenBrowser: true,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {
    '/api': {
      target: 'http://www.abc.com',  //目標(biāo)接口域名
      changeOrigin: true,  //是否跨域
      pathRewrite: {
        '^/api': '/api'   //重寫接口
      }
    },
  cssSourceMap: false
}

上面這段代碼的效果就是將本地8080端口的一個請求代理到了http://www.abc.com這一域名下：

'http://localhost:8080/api' ===> 'http://www.abc.com/api'

沒有統(tǒng)一項目名下的

上面那種情況是有一個統(tǒng)一的項目名api的，所以說是比較好匹配的，就相當(dāng)于說直接將以api開頭的接口名代理一下?lián)Q成目標(biāo)域名訪問就好了，可是如果說后臺返給我們前端的接口沒有了統(tǒng)一的項目名呢？之前，我是一個個單獨(dú)去做了轉(zhuǎn)換，接口少還沒什么關(guān)系，但多了肯定是不現(xiàn)實(shí)的，前段時間在一次面試中受到了面試官的啟發(fā)想到了這樣一種取巧的方案：

//先人為給接口地址前面加上一個自定義的項目名
let someApi = 'api' + '/xx/xx';

dev: {
  env: require('./dev.env'),
  port: 8080,
  autoOpenBrowser: true,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {
    '/api': {
      target: 'http://www.abc.com', //目標(biāo)接口域名
      changeOrigin: true, //是否跨域
      pathRewrite: {
        '^/api': '/' //重寫接口
      }
    },
    cssSourceMap: false
  }
}

這里的項目名api是我們?nèi)藶榧由先サ?，?jīng)過代理之后就沒了，這樣我們在配置代理這里還是只需要配置一份就夠了，只是在寫接口地址時要注意區(qū)分開發(fā)環(huán)境和線上環(huán)境就可以了。

關(guān)于proxyTable的原理

我在網(wǎng)上查了一下，這個代理實(shí)際上是利用http-proxy-middleware這個插件完成的，具體到這個插件的運(yùn)行機(jī)制，由于是英文再加上能力有限就沒深究了。但我想探究的是這種代理方式實(shí)際上是如何做到的，我看網(wǎng)上有人說實(shí)際上就是我們的本地服務(wù)器將請求轉(zhuǎn)發(fā)給了目標(biāo)服務(wù)器。之所以出現(xiàn)跨域是因為瀏覽器有同源策略的限制，但服務(wù)器是沒有的，所以這種代理方式能夠?qū)崿F(xiàn)的機(jī)制大體就是：

本地服務(wù)器 --》 代理 --》目標(biāo)服務(wù)器 --》拿到數(shù)據(jù)后通過代理偽裝成本地服務(wù)請求的返回值 ---》然后瀏覽器就順利收到了我們想要的數(shù)據(jù)