Vue-cli建立項目從單頁面到多頁面4 - 本地開發服務器設置代理

先後端分離開發時，有時候會遇到跨域的狀況：只在開發的時候存在跨域，項目上線後，因爲配置的域名相同，跨域就會不存在。

這個時候，有兩種方案能夠比較快的解決：
一、利用h5的特性，使用cors，在ngnix服務器上設置header：Access-Control-Allow-Origin的值爲 *(或者目標域名)容許跨域。

二、在咱們的本地開發服務器上設置代理。

這裏主要介紹使用vue-cli建立項目後，怎樣配置本地服務器的代理，成功經過本地服務器代理請求數據的解決方案。

解決方案

進入config/index.js中，在dev屬性中添加proxyTable的設置。
假設我如今須要將我本地的http://localhost:8080/somepath代理到目標地址http://a.b.com/otherpath 下，那麼我就能夠這樣作：

module.exports= {
  dev: {
    proxyTable: {
      '/somepath': {
        target: 'http://a.b.com',
        changeOrigin: true,
        pathRewrite: {
          '^/somepath': '/otherpath'
        }
      }
    }
  }
}

個人vue多頁面系列的其餘博客連接：

Vue-cli建立項目從單頁面到多頁面

Vue-cli建立項目從單頁面到多頁面2-history模式

Vue-cli建立項目從單頁面到多頁面3-關於將打包後的項目文件不放在根目錄下