webpack - 如何使用 historyApiFallback 和代理远程 api 请求来设置 webpack 开发服务器？

Question

我有一个使用 react-router 的 React 应用程序，所以它利用了 HTML5 历史 API，我试过 historyApiFallback设置为 true为 404 条路径提供服务 index.html而不是返回 HTTP 响应。

该单页应用程序向远程 API 服务器发出一些请求，这就是为什么我还需要将一些请求代理到我在开发时也在运行的快速服务器。 Web React 应用程序在端口 3000 上提供服务，API 在端口 3001 上运行。

所以我试过:

devServer:{
    contentBase: 'src/www',  //Relative directory for base of server
    devtool: 'eval',
    hot: true,        //Live-reload
    inline: true,
    port: 3000,        //Port Number
    host: 'localhost', //Change to '0.0.0.0' for external facing server
    historyApiFallback: true,
    proxy: {
      '^\/users|sitters|bookings': {
        target: 'http://127.0.0.1:3001',
        rewrite: function(req) {
          req.url = req.url.replace(/^\/api/, '');
        }
      }
    }
  },
  devtool: 'eval',
  output: {
    path: buildPath,    //Path of output file
    filename: 'app.js'
  },

因此，如果请求的路径以 /users 开头，我想要的是访问远程 api 服务器。或 /sitters或 /bookings但是去 historyApiFallback (服务 index.html)否则。

当然，现在 historyApiFallback 始终为 HTML 文件提供服务，但我还需要代理正常工作。

Answer 1

免责声明。这个答案可能已经过时
在 Express 中间件中，堆栈顺序很重要。
代理应该首先在 webpack 配置中设置，而不是 historyApiFallback ，它应该是这样的:

  devServer:{
    contentBase: 'src/www',  //Relative directory for base of server
    devtool: 'eval',
    hot: true,        //Live-reload
    inline: true,
    port: 3000,        //Port Number
    host: 'localhost', //Change to '0.0.0.0' for external facing server
    proxy: {
      '^\/users|sitters|bookings': {
        target: 'http://127.0.0.1:3001',
        rewrite: function(req) {
          req.url = req.url.replace(/^\/api/, '');
        }
      }
    },
    historyApiFallback: true
  },

因此，当然可以根据应用程序需要将代理更改为任何模式或正则表达式。就我而言，这就是我所需要的。