前後端分離開發中必要會遇到的問題—跨域。在使用vue開發的時候，開始為了解決跨域問題。採用的是CORS（Cross-origin resource sharing）。後臺在響應頭中新增Access-Control-Allow-Origin。這樣就可以跨域調後臺介面了。
在前幾天無意中看到了config的index.js檔案中有一個proxyTable屬性，通過配置可以解決開發環境的跨域
開發期間的API代理

當將此樣板與現有後端整合時，通常需要在使用dev伺服器時訪問後端API。為了實現這一點，我們可以並行（或遠端）執行dev伺服器和API後端，並讓dev伺服器將所有API請求代理到實際的後端。

要配置代理規則，請在其中編輯dev.proxyTable選項config/index.js。dev伺服器正在使用http代理中介軟體進行代理，因此您應參考其文件以獲取詳細的用法。但這是一個簡單的例子：

// config/index.js
module.exports = {
  // ...
  dev: {
    proxyTable: {
      // proxy all requests starting with /api to jsonplaceholder
      '/api': {
        target: 'http://jsonplaceholder.typicode.com'
 
,
        changeOrigin: true,
        pathRewrite: {  //需要rewrite重寫的, 如果在伺服器端做了處理則可以不要這段
          '^/api': ''
        }
      }
    }
  }
}

網址匹配

除了靜態網址之外，您還可以使用glob模式來匹配URL，例如/api/**。有關詳細資訊，請參閱上下文匹配。此外，您可以提供一個filter可以是自定義函式的選項，以確定請求是否應被代理：

proxyTable: {
  '*': {
    target: 'http://jsonplaceholder.typicode.com'
 
,
    filter: function (pathname, req) {
      return pathname.match('^/api') && req.method === 'GET'
    }
  }
}