Webpack devServer 配置 proxy 为啥不生效？

看起来你遇到了一个典型的 devServer proxy 配置问题。让我来详细分析一下可能的原因和解决方案。

首先，你的配置基本是正确的，但有几个细节需要检查。具体来说，可能是路径匹配的问题，或者是请求方式导致的。

我建议你在原有配置基础上加上 logLevel: 'debug' 来查看详细的代理日志，这样能帮助我们排查问题：

devServer: {

  proxy: {

    '/api': {

      target: 'http://localhost:3000',

      changeOrigin: true,

      logLevel: 'debug', // 加上这行

      pathRewrite: {'^/api' : ''} // 这个重写规则也建议加上

    }

  }

}

这里解释下为什么要加这些：logLevel 可以让我们看到代理请求的实际处理过程；pathRewrite 则是为了去掉请求路径中的 /api 前缀，方便后端服务识别。

另外有个常见坑点需要注意：如果你在前端代码中直接使用了绝对路径（比如 http://localhost:8080/api），那么这个请求会绕过 webpack 的代理机制，因为它是浏览器直接发起的。确保请求路径是以相对路径 /api 开头的。

如果还是不行，尝试把 proxy 配置放到 devServer 外面单独定义，有时候这种写法反而更稳定：

proxy: {

  '/api': {

    target: 'http://localhost:3000',

    changeOrigin: true,

    logLevel: 'debug',

    pathRewrite: {'^/api' : ''}

  }

},

devServer: {

  // 其他配置

}

最后提醒下，记得每次修改完配置要重启 devServer 才会生效。说实话，开发环境配置这些问题最烦人了，但慢慢调总会好的。

当时我也卡在这，搞了半天才发现是路径匹配的问题。你现在的配置只写了 '/api'，但实际请求可能带有多级路径，比如 '/api/user/login' 这种。试试改成这样：

devServer: {

  proxy: {

    '/api': {

      target: 'http://localhost:3000',

      changeOrigin: true,

      pathRewrite: {'^/api' : ''},

      logLevel: 'debug'

    }

  }

}

加了 pathRewrite 可以去掉请求中的 /api 前缀，让后端能正常解析路径。还有个坑就是 logLevel 设置成 debug 可以看到代理请求的日志，帮你排查问题。

另外记得检查下你的请求是不是直接发的 XMLHttpRequest 或者 fetch，有时候前端代码写死了 base URL 也会导致这个问题。我就碰到过同事在 axios 配置里硬编码了地址，结果怎么配 proxy 都没用。

如果还是不行，试试把 target 改成完整路径，带上协议和端口，确保没有任何拼写错误。折腾 Webpack 的时候真是得耐心点，这玩意儿经常不按套路出牌。