WebpackDevServer 代理设置

Question

如何在我的 React/Node chrome 扩展中使用 WebpackDevServer 设置代理？我的服务器是运行 localhost:4000，React 前端是 localhost:5000

使用 Axios，我尝试点击路由：axios.get(/api/user/ticket)，但是，localhost:4000 未被代理，点击的路由是我的 chrome 扩展名：chrome-extension://fjkfhdsjkwerjhdksfhdjkshfds/api/ticket/user/.

如果我显式调用 localhost: axios.get(localhost:4000/api/user/ticket)，那么一切正常。我是 webpack 的新手，所以不完全确定我做错了什么。感谢您的帮助！

使用 docs

实现的网络服务器代理

var server = new WebpackDevServer(
  {
    https: false,
    hot: false,
    client: false,
    proxy: {
      '/api': 'http://localhost:4000',
    },
    host: 'localhost',
    port: env.PORT,
    static: {
      directory: path.join(__dirname, '../build'),
    },
    devMiddleware: {
      publicPath: `http://localhost:${env.PORT}/`,
      writeToDisk: true,
    },
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
    //this needs to change to prevent dns attacks
    allowedHosts: 'all',
  },
  compiler
);

Answer 1

代理仍然不起作用，但是，我通过在 axios 中使用 baseUrls 解决了这个问题。在 prod vs dev 中，我只需要在一个地方更改它们就可以了。不理想，但它完成了工作。

WebpackDevServer 代理设置

WebpackDevServer Proxy Setup

javascript

node.js

reactjs

webpack

webpack-dev-server