Question

我有一个使用react-router的反应应用程序，因此它正在使用HTML5历史记录API，我已尝试将historyApiFallback设置为true来提供服务相同index.html的404路径1}}而不是返回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'
  },

所以，如果请求的路径以/users或/sitters或/bookings开头，请转到远程api服务器，但请转到historyApiFallback（服务{{ 1}}}否则。

当然，现在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
  },

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

Answer 2

我最终得到了以下解决方案：

const REMOTE_URL = process.env.REMOTE_URL || 'http://localhost:8090/';

const config = {
    output: {
        publicPath: '/'
    },
    devServer: {
        historyApiFallback: true,
        contentBase: './app',
        proxy: [{
            context: '/api',
            target: REMOTE_URL,
            pathRewrite: {
                '^/api' : '/'
            }
        }]
    }
};

因此，http://locahost:port/api/的所有请求都通过代理，/api重新发送。

例如http.get('/api/users')转到/users。

顺便说一下。代理内的对象只是http-proxy-middleware configuration。

Answer 3

我正在使用webpack v4，并在pathRewrite内为proxy添加了适当的值。

例如，您在localhost:8080上托管客户端，在localhost:3000上托管API。然后，您的webpack devServer部分将如下所示。

devServer: {
    historyApiFallback: true,
    proxy: {
        '/graphql': {
            changeOrigin: true,
            pathRewrite: { '^/api': '' },
            target: 'http://localhost:3000/api'
        }
    }
}

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

3 个答案:

在Express中间件堆栈顺序中很重要。