webpack之proxyTable設置跨域

爲何要使用proxyTable

• 很簡單，兩個字，跨域。
• 在平時項目的開發環境中，常常會遇到跨域的問題，尤爲是使用vue-cli這種腳手架工具開發時，因爲項目自己啓動本地服務是須要佔用一個端口的，因此必然會產生跨域的問題。固然跨域有多種解決方式，這裏就不一一例舉，下次弄篇文章單獨講，在使用webpack作構建工具的項目中使用proxyTable代理實現跨域是一種比較方便的選擇。

<!--more-->

如何使用proxyTable

仍是拿以前使用過的vue-cli舉例。咱們首先要在項目目錄中找到根目錄下config文件夾下的index.js文件。因爲咱們是在開發環境下使用，天然而然是要配置在dev裏面：

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

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

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

沒有統一項目名下的使用

上面那種狀況是有一個統一的項目名api的，因此說是比較好匹配的，就至關於說直接將以api開頭的接口名代理一下換成目標域名訪問就行了，但是若是說後臺返給咱們前端的接口沒有了統一的項目名呢？以前，我是一個個單獨去作了轉換，接口少還沒什麼關係，但多了確定是不現實的，前段時間在一次面試中受到了面試官的啓發想到了這樣一種取巧的方案：

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

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

這裏的項目名api是咱們人爲加上去的，通過代理以後就沒了，這樣咱們在配置代理這裏仍是隻須要配置一份就夠了，只是在寫接口地址時要注意區分開發環境和線上環境就能夠了。

關於proxyTable的原理

我在網上查了一下，這個代理其實是利用http-proxy-middleware這個插件完成的，具體到這個插件的運行機制，因爲是英文再加上能力有限就沒深究了。但我想探究的是這種代理方式其實是如何作到的，我看網上有人說實際上就是咱們的本地服務器將請求轉發給了目標服務器。之因此出現跨域是由於瀏覽器有同源策略的限制，但服務器是沒有的，因此這種代理方式可以實現的機制大致就是：

本地服務器 --》 代理 --》目標服務器 --》拿到數據後經過代理假裝成本地服務請求的返回值 ---》而後瀏覽器就順利收到了咱們想要的數據

這是個人簡單理解，按這個理解來講的話只要服務器容許跨域，任何人都可以拿到它的數據嗎？那樣同源策略不就大大弱化了嗎？目前對這個問題還不是太理解，但願有想法的小夥伴留言指正！

參考文章

• webpack之proxyTable設置跨域
• vue-cli 配置 proxyTable 的問題，這樣子是最佳解決方案嗎？
• 詳解Vuejs2.0 如何利用proxyTable實現跨域請求