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配置代理才会生效。