開發環境下 vue proxyTable 配置代理解決跨域

vue + webpack 構建的項目解決瀏覽器跨域問題

瀏覽器同源策略是瀏覽器的一種保護機制。

瀏覽器發送跨域的ajax請求時，並非請求發不出去，請求能夠發出去，而且後臺接收到請求後能夠返回響應數據，可是瀏覽器不接收這些不一樣源的響應數據。

代理的原理：

• 代理的位置：web服務器
• 代理攔截瀏覽器發出的ajax請求，將其轉發給目標後臺服務器，而後獲取到響應後再將響應發回給瀏覽器。因爲代理的位置是在web服務器，也就是瀏覽器的同源策略所限制的域內，因此瀏覽器接收到此響應後不會將其視爲危險資源，會正常解析執行。

在 config/index.js 中配置 proxyTable 代理，以下圖所示：

proxyTable: {  // 配置代理
  '/api': {  // 匹配全部以 '/api' 開頭的請求路徑
    target: 'http://localhost:4000',  // 代理目標的基礎路徑
    changeOrigin: true,   // 支持跨域
    pathRewrite: { // 重寫路徑： 去掉路徑中開頭的'/api'
      '^/api': ''
    }
  }
},

此方法能夠解決開發環境下的跨域問題，生產環境還需配合後端解決。