ReactJS后端请求和代理

Question

关于 ReactJS 在开发和生产中应该如何工作，我有几个问题。我的 ReactJS 应用程序是从创建应用样板开始构建的。我有一个Spring靴后端在端口 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这样的网址：

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)?

Answer 1

一般来说，代理不适用于生产。你的应用程序应该在同一个端口，在一个服务器上提供应用程序和api。https://stackoverflow.com/a/46771744/8522881