Reactjs 在react中，如何将后端RESTAPI传递到前端？

这里是一个非常不公平的问题，我不想受到指责。 我已经用createreact应用程序创建了我的前端，我正在使用fetch将后端api传递到我的前端。后端与前端在同一台计算机上的localhost:8080上运行。前端正在端口3000上运行。我已经将URL硬编码为“”等等。如果我在主机所在的同一台机器上访问前端，一切都会正常工作。但是，如果我从另一台机器访问前端，API调用将失败，这是有意义的，因为调用是对localhost进行的

现在，传入与机器无关的RESTURL的最佳方法是什么？我不想为我的后端设置静态IP。我试过：

制作生产构建并将其与后端绑定。这会再次调用访问计算机上的localhost，但失败

使用window.location.hostname+“getForm”操作URL。当我有不同的服务器托管前端和后端时，这会失败

编辑* 好的，我通过在package.json中添加以下行，成功地向节点服务器添加了一个代理。

“代理”：http://localhost:8080/"

这会将前端的localhost:3000/api/getForm转发到后端的localhost:8080/api/getForm。这工作得很好，但现在我陷入了一个问题，我想这是由于不正确的CORS设置。到后端的代理GET请求（Spring Boot API）工作正常，但代理POST请求返回403，响应为“无效CORS请求”

我添加了一个@CrossOrigin（origins=”http://localhost:3000）到我的spring应用程序的类级别，这将使所有API都变得友好。另外，我正在使用前端的fetch进行呼叫。关于我可能出错的地方有什么线索吗

POST/api/POST HTTP/1.1 主机：localhost:3000 连接：保持活力 内容长度：22 来源： 用户代理：Mozilla/5.0（X11；Linux x86_64）AppleWebKit/537.36（KHTML，类似Gecko）Chrome/67.0.3396.87 Safari/537.36 内容类型：application/json 接受：/ 推荐人： 接受编码：gzip，deflate，br 接受语言：en-IN，en-GB；q=0.9，在美国；q=0.8，en；q=0.7

正文-{“标题”：“abc”，“正文”：“def”}

响应-403，无效的CORS请求

GET/api/GET HTTP/1.1 主机：localhost:3000 连接：保持活力 用户代理：Mozilla/5.0（X11；Linux x86_64）AppleWebKit/537.36（KHTML，类似Gecko）Chrome/67.0.3396.87 Safari/537.36 接受：/ 推荐人： 接受编码：gzip，deflate，br 接受语言：en-IN，en-GB；q=0.9，在美国；q=0.8，en；q=0.7

---

响应-200，[{“id”：1，“title”：“Post 1”，“body”：“Backend连接得很好！”}]

当您不使用node提供代码时，您可以使用webpack添加全局代码，但随后需要为每个环境创建单独的构建

使用带有SSR的节点时：

我通常使用一个.env文件，其中包含主机名、端口等的特定常量。。并在js配置文件中使用它们。然后可以导入该js文件并将其用于获取调用。可以使用dotenv（）将.env变量添加到节点进程中

配置文件：

const config = {
  env: {
    host: (envConfig && envConfig.API_HOST) || 'localhost',
    port: (envConfig && envConfig.API_PORT) || '8000',
    httpOrigin: (envConfig && envConfig.API_PROTOCOL) || 'http'
  }
}

export default config;

.env文件：

API_PROTOCOL=https
API_HOST=localhost
API_PORT=8000

要将配置传输到前端，您可以在html主体中序列化配置，并在客户端渲染中获取配置

<script dangerouslySetInnerHTML={{ __html: `window.__envConfig=${serialize(envConfig)};` }} charSet="UTF-8"/>