devServer.proxy

今天學習下專案中最常用的devServer.proxy
dev-server是webpack-dev-server的簡寫

參考：https://www.webpackjs.com/configuration/dev-server/#devserver-proxy

如果你有單獨的後端開發伺服器API，並且希望在同域名下發送API請求，那麼代理某些URL會很有用。

在 localhost:3000 上有後端服務的話，你可以這樣啟用代理：

proxy: {
    "/api": "http://localhost:3000"
}

請求到 /api/users 現在會被代理請求到 http://localhost:3000/api/users

如果你不想始終傳遞/api，則需要重寫路徑：

proxy: {
    "/api": {
        target: "http://localhost:3000"
        pathRewrite: {"^/api": ""}
    }
}

專案執行在localhost的proxy配置是不會生效的，需要修改hosts檔案

找到系統盤下的hosts檔案

檔案路徑：C:\Windows\System32\drivers\etchosts

複製一份出來，放到任意位置，比如“文件”，用vscode編輯器開啟hosts

    127.0.0.1       local.xxx.cn

修改，儲存，覆蓋C:\Windows\System32\drivers\etc下的hosts檔案

用local.xxx.cn代替瀏覽器url中的localhost

此時，proxy配置才會生效。代理也會生效。