ReactJS 后端请求和代理答案

【问题标题】：ReactJS backend requests and proxyReactJS 后端请求和代理
【发布时间】：2020-08-12 03:15:06
【问题描述】：

我有几个关于 ReactJS 在开发和生产中应该如何工作的问题。我的 ReactJS 应用程序是从 creare-react-app 样板开始构建的。我有一个 SpringBoot 后端监听端口 8080。我注意到的第一件事是，如果我设置这样的代码来发出请求，代码会挂起：

async componentDidMount() {
    ...
    const response = await fetch('http://localhost:8080/api/compliance');

我需要把它转换成：

async componentDidMount() {
    ...
    const response = await fetch('/api/compliance');

然后添加一行：

"proxy": "http://localhost:8080",

这很好用。问题是当我把它放在一个预生产环境（或集成环境）中时，我有一个像http://www.mywebsite.com 这样的 URL，我得到了：

Invalid Host Header

在网上看，我注意到这可能是：

1. proxy that checks. the HTTP Header host and verify it to avoid security attacks
2. webpack package

我想了解：

1. Is proxy really necessary to let ReactJS app talk with its backend?
2. If no, how I can solve the issue (currently solution on the web didn't solve my problem)?

【问题讨论】：

标签： reactjs

【解决方案1】：

通常代理不适合生产。您的应用程序应在同一端口上的一台服务器上同时提供应用程序和 api。 https://stackoverflow.com/a/46771744/8522881

【讨论】：

好的，这可能是有道理的，但我不清楚如何更改我的 ReactJS 应用程序以避免使用代理。如果我很好理解，该链接不会提供答案。您说“您的应用程序应该在同一个端口上同时提供应用程序和 API”，但它们是如何完全不同的两段代码。我的前端在 ReactJS 中监听 3000 端口，我的后端是 SpringBoot 代码监听 8080 端口。
这是在开发环境中。在生产中，您必须让服务器在端口 80 上侦听以响应用户的第一次获取请求。这个第一个 get 请求会用 index.html 响应，并注入你的 React 应用程序的 JavaScript 代码。您通过 npm run build（或 CRA 中的其他构建脚本）获得的此代码。提供此请求的同一台服务器也处理您的 api 请求。尝试首先在不使用 REST API 的情况下构建您的简单应用。