后端路由的项目使用 webpack 的 devServer.proxy 的一个问题

Question

假设有个后端路由的项目，本地路由已经配置好，可以打开 www.abc.com/a.html, www.abc.com/b.html 等页面，想用 webpack 进行前端开发。

因为 webpack-dev-server 起的本地服务都是 localhost，需要将所有的请求都 proxy 到 www.abc.com，所以做如下配置：

devServer: {
  proxy: {
    "/": {
      target: "http://www.abc.com",
      changeOrigin: true
    }
  }
}

但是尴尬的是用命令行 webpack-dev-server 启动服务后，输入 localhost:8080 直接会重定向到 www.abc.com 导致打包的 js 404。

提问：如何使得 url 不重定向？还是我某步姿势有错误？

Answer 1

你这个当然会重定向了，因为你的前端路由定义了path: '/'，而你的反向代理又写了'/'，结果可想而知，你现在要做的就是把这个'/'改成不会冲突的名称，比如下面这样：

devServer: {
  proxy: {
    "/abc": {
      target: "http://www.abc.com",
      changeOrigin: true,
      pathRewrite: {
         '^/abc': ''
      }
    }
  }
}

Answer 2

不是很明白你的需求，当你的localhost:8080 重定向到 www.abc.com,所有的资源直接取得的是www.abc.com下的资源，何来404？