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

Question

我有一个使用的react应用程序react-router,因此它正在使用HTML5历史记录API,我尝试historyApiFallback设置true为服务404路径服务相同index.html而不是返回HTTP响应.

该单页应用程序向远程 API服务器发出一些请求,这就是为什么我还需要将一些请求代理到我正在开发时运行的快速服务器.Web反应应用程序在端口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'
  },

所以,我如果请求的路径开始我想要的击球远程API服务器无论是/users或/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
  },

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