webpack proxy代理配置

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\etc  hosts

復制一份出來，放到任意位置，比如“文檔”，用vscode編輯器打開hosts

    127.0.0.1       local.xxx.cn

修改，保存，覆蓋C:\Windows\System32\drivers\etc下的hosts文件

 

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

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