Webpack 将应用代理反应到快递服务器。从 express 服务器返回 json 响应而不是响应组件

Question

我有一个使用 express 作为后端的 react web 应用。

我已对其进行了设置，以便将反应服务器端口 (9000) 上的请求 url 代理到快速服务器 (3000)。问题是，当我输入路径 /examplepath 时，它会返回快速应用程序返回的 json，而不是返回从后端获取响应而呈现的组件。我得到了快速响应并查看它，而不是响应获取快速响应并查看它，然后渲染并向我展示该渲染。

When I click this button, it renders the correct page because it uses this code

componentDidMount() {
    axios.post('/', qs.stringify(this.state))
    .then(res => {
      if (res.data === "session") {
        this.setState({session: true})
      }
    })
  }

It will render the page correctly using react

但如果我直接访问路由，它会呈现来自 express 后端的 json 响应。 Like this

当我希望它像使用 react 正确渲染的那样渲染时

  devServer: {
    port: 9000,
    open: true,
    proxy: {
      '/': 'http://localhost:3000'
    }
  }

这个 ^ 是我的 webpack.config.js

Answer 1

尝试将historyApiFallback: true 添加到您的webpack.config.js 文件中（不确定代理是否会弄乱它——如果是这样，请在后端使用 express cors 中间件）：

devServer: {
    host: 'localhost',
    port: 9000,
    quiet: true,
    historyApiFallback: true,
  },

另外，更常见的端口设置是：3000 上的 React 应用程序和5000 上的 API/服务器。

此外，请确保明确区分前端和后端路径。尝试将您的后端路由保留到 /api/someurl，并将其添加到您的代理（以及 AJAX 请求）：

proxy: {
      '/api/*': 'http://localhost:3000/api/'
    }

然后，所有前端请求将是：

axios.get('/api/someurl').then().catch()

将解析为http://localhost:3000/api/someurl。这样，就没有机会混合前后端路由了。

就个人而言，我会推荐 cors 而不是 proxy，因为已知代理会导致随机 connection issues。