Webpack devServer 配置 proxy 为啥不生效？

一之芳提问于 2026-03-26 16:03:19 阅读 5

前端

我在本地开发时用 Webpack 的 devServer 配置了 proxy，想把 /api 开头的请求代理到后端接口，但发请求还是直接打到了前端端口，根本没走代理。

我试过改 target 地址、加 pathRewrite，也重启了 devServer，都不行。控制台也没报错，就是请求地址还是 localhost:8080/api/xxx。我的配置是这样写的：

devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:3000',
      changeOrigin: true,
    }
  }
}

Plugin 构建工具

我来解答赞 1 收藏

反馈

1 条解答

❤朱莉 Lv1

当时我也卡在这，搞了半天才发现是路径匹配的问题。你现在的配置只写了 '/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 的时候真是得耐心点，这玩意儿经常不按套路出牌。

2026-03-26 16:04