在開發(fā)過程中，為了方便前后端聯(lián)調(diào)，通常會(huì)在vue.config.js中配置devServer。而在devServer中配置proxy屬性，可以將指向本地的請(qǐng)求
(例如：http://localhost:80/prod_api/action)代理到后端的開發(fā)服務(wù)地址上(例如：http://localhost:81/action)

這里簡(jiǎn)單說一下正向代理

代理服務(wù)器代替客戶端像服務(wù)器發(fā)起請(qǐng)求，隱藏了客戶端。

發(fā)起請(qǐng)求：代理服務(wù)器接收從客戶端發(fā)出的請(qǐng)求，轉(zhuǎn)而向目標(biāo)服務(wù)器發(fā)起請(qǐng)求。

響應(yīng)數(shù)據(jù)：目標(biāo)服務(wù)器響應(yīng)請(qǐng)求給代理服務(wù)器接收，代理服務(wù)器接受請(qǐng)求后，響應(yīng)給客戶端。

vue.config.js中

devServer: {
    //接口代理
    proxy: {
      '/prod_api': {
        target: `http://localhost:81`,// 后端服務(wù)器地址
        changeOrigin: true,// 是否改變Origin頭信息,是否允許跨域
        pathRewrite: {//對(duì)路徑匹配到的字符串重寫
          ['^' + '/prod_api']: ''
          // 替換前綴'/prod_api'，即：請(qǐng)求到 http://localhost:80/prod_api/xxx,現(xiàn)在會(huì)被代理到請(qǐng)求 http://localhost:81/xxx。
          // 例如 /prod_api/user 現(xiàn)在會(huì)被代理到請(qǐng)求  http://localhost:81/user
        }
      }
    }
  }

當(dāng)瀏覽器發(fā)起一個(gè)請(qǐng)求 http://localhost:80/prod_api/login ，前端拿著配置項(xiàng)的那個(gè) /prod_api 地址去匹配請(qǐng)求中的地址，如果請(qǐng)求的地址中包含
配置項(xiàng)的地址 /prod_api ，則匹配成功。匹配成功后，會(huì)將匹配到的地址及其后面的地址拼到target的后面，
也就是變成 http://localhost:81/prod_api/login ，通過這個(gè)地址向后端發(fā)起請(qǐng)求，
但是這時(shí)候后端的地址中可能不包含 /prod_api ，那就需要 pathRewrite這個(gè)屬性來將請(qǐng)求url中的 /prod_api 替換成 ''

流程如下：

1、瀏覽器發(fā)起請(qǐng)求 http://localhost:80/prod_api/login

2、和配置項(xiàng)匹配成功后，將 /prod_api/login 拼接到target的后面

3、現(xiàn)在，對(duì) /prod_api/login 的請(qǐng)求會(huì)將請(qǐng)求代理到 http://localhost:81/prod_api/login

4、如果后端接口中不包含 /prod_api，不希望傳遞 /prod_api，則需要重寫請(qǐng)求路徑 將瀏覽器發(fā)起的請(qǐng)求的請(qǐng)求URL中的 “/prod_api” 替換為 “”

5、此時(shí)對(duì) http://localhost:80/prod_api/login 的請(qǐng)求，前端會(huì)將請(qǐng)求代理到 http://localhost:81/login