在react中，如何将后端REST API传递给前端？

Question

1. 制作生产构建并将其与后端绑定。这再次调用访问计算机上的localhost，但失败。
2. 使用window.location.hostname+“getform”操作URL。当我有不同的服务器承载前端和后端时，这将失败。

Edit*好的，我通过向package.json添加以下行，成功地向节点服务器添加了一个代理。“proxy”：“http://localhost:8080/”它将前端的localhost:3000/api/getform转发到后端的localhost:8080/api/getform。这工作得很好，但现在我被困在一个问题上，我认为是由于不正确的CORS设置。Proxied GET请求到后端（Spring Boot API）工作正常，但Proxied POST请求返回403，响应为“Invalid CORS Request”。

我已经在spring应用程序的类级别中添加了一个@crossorigin(Origins=“http://localhost:3000”），这将使所有API CORS友好。另外，我在前端使用fetch进行调用。我可能弄错了什么有线索吗？

响应-403，无效的CORS请求

GET/api/GET HTTP/1.1主机:localhost:3000连接：keep-alive用户代理:mozilla/5.0(x11；Linux x86_64)AppleWebKit/537.36（KHTML,like Gecko）Chrome/67.0.3396.87 Safari/537.36 Accept://referer:http://localhost:3000/Accept-Encoding:gzip,deflate,br Accept-Language:en-IN,en-GB；q=0.9,en-Grea；q=0.8,en；q=0.7

响应-200,[{“id”：1,“title”：“post 1”,“body”：“backend连接得很好！”}]

Answer 1

如果不使用node为代码提供服务，可以使用webpack添加全局，但需要为每个环境创建单独的构建。

当将Node与SSR一起使用时：

我通常所做的是使用一个带有特定常量的.env文件来表示主机名、端口、…并在js配置文件中使用它们。然后，您可以导入该js文件，并将其用于获取调用。可以使用dotenv（https://www.npmjs.com/package/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;

API_PROTOCOL=https
API_HOST=localhost
API_PORT=8000

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