webpack之配置代理proxyTable

webpack之配置代理proxyTable

爲什麼要配置代理？

瀏覽器的同源策略導致資源訪問中出現跨域問題，從而請求失敗，可以通過webpack配置代理的方式解決這個問題。

webpack配置（結合vue項目）：

1.在項目的config文件夾下新建index.js文件配置在dev下，即在開發環境下使用：

4.如下所示，配置代理後，請求成功：
Request URL: http://127.0.0.1:9527/dma/site/statistic?nowTime=1592879852614
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:9527
Referrer Policy: no-referrer-when-downgrade

note：有的代理配置之後是不需要項目名稱的，或者說沒有明確的項目名稱，我們可以在配置中配置pathRewrite項（在請求url中去除標示api），如下代碼：

proxyTable: {
    '/api': {
      target: `https://${url}`,//目標接口
      changeOrigin: true,  //是否跨域
      pathRewrite: {
        '^/api': '/'   //重寫接口
      }
    },