Webpack 4代理配置问题：新手求助正确设置方法

Hey there! 作为刚接触Webpack的新手，踩过同款代理配置的坑太懂你的感受了～你用的是Webpack 4发布前的旧语法，现在Webpack Dev Server（WDS）的代理规则已经更新，所以才会报错，下面给你一步步搞定：

问题根源 #

Webpack 4及之后的WDS，代理配置的路径匹配语法发生了变化：旧写法'/api/*'不再生效，WDS现在采用更简洁的前缀匹配逻辑。

正确配置方案 #

在你的webpack.config.js文件中，找到devServer部分，改成以下配置：

module.exports = {
  // 其他Webpack配置（entry、output等）...
  devServer: {
    port: 8080, // 保持你的WDS运行端口不变
    proxy: {
      '/api': { // 匹配所有以/api开头的请求
        target: 'http://localhost:5000', // 你的Express后端地址
        secure: false, // 允许转发到http非HTTPS服务器，保持不变
        changeOrigin: true, // 关键！解决跨域请求中的Host头问题
        // 可选：如果后端接口不带/api前缀，添加此行去掉前缀
        // pathRewrite: { '^/api': '' }
      }
    }
  }
};

关键配置解释 #

• '/api'匹配规则：WDS会自动拦截所有以/api开头的请求（比如/api/users、/api/posts）并转发到目标服务器，不需要手动加*通配符。
• changeOrigin: true：当WDS转发请求时，会把请求头里的Host字段改成localhost:5000，避免后端因为Host校验或跨域策略拒绝请求，这是很多新手配置失败的核心原因。
• 可选pathRewrite：如果你的Express后端接口本身没有/api前缀（比如后端接口是/users而不是/api/users），就加上这行配置，把请求路径里的/api前缀去掉再转发。

验证配置 #

1. 启动你的Express后端（确保它监听5000端口）
2. 启动Webpack Dev Server（npm start或你配置的启动命令）
3. 在前端发起请求，比如fetch('/api/test')，查看WDS控制台的日志，会看到类似[HPM] Proxy created: /api -> http://localhost:5000的提示，说明代理生效啦～

内容的提问来源于stack exchange，提问作者Oren Saldanha