即使配置设置正确，React 代理也不起作用

Question

我尝试了多种方法

我添加了

"proxy": "http://localhost:5000/"

到 package.json，甚至

devServer: {

    historyApiFallback: true,

     proxy: {

     "/": "http://localhost:5000"

     }

  }

to webpack.config.dev.js

但是，这些似乎都不起作用。当我转到localhost：3000/age（我的一个路由）时，后端没有收到任何请求，即使 React 组件绑定到它，并且我在 package.json 中设置了代理

我的Express应用程序在路由5000上侦听，并且我正在通过浏览器以localhost：3000 /age访问它，并且还尝试了localhost：5000 /age，但无法正常工作

Answer 1

查看此文档 开发服务器将仅尝试将不包含 text/html 的请求发送到代理。如果您直接在浏览器上访问。其将内容类型标头设置为 。所以它不起作用。最好仅用于 ajax/fetch 请求。text/html问题对于开发 react 有自己的服务器。如果你需要一个 react side route，最好尝试 react-router。生产构建后，其工作方式与您预期相同

Answer 2

您需要将代理设置为后端的端口。如果您的后端正在侦听5000，那么它应该是"proxy": "http://localhost:5000"默认情况下，对站点自己的域做出反应时的任何 http 请求都使用运行应用的任何端口。由于 react 在 5000 上运行，因此它将通过该端口发送所有请求。代理告诉它将此默认行为更改为指定的代理。