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

How to setup a webpack dev server using both historyApiFallback and proxying remote api requests?

我有一个使用 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/sitters/bookings 开头,则访问远程 api 服务器,但请转到 historyApiFallback(服务index.html)否则。

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

免责声明。此答案可能已过时

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

Proxy 应该首先在 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
  },

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

我最终得到以下解决方案:

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.

我正在使用 webpack v4 并在 proxy 中为 pathRewrite 添加适当的值对我有用。

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

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