Question

这里的问题很笨拙，我不想画出高调。 我使用create-react-app创建了前端，并且正在使用fetch将后端API传递给前端。后端在与前端相同的机器上的localhost：8080上运行。前端在端口3000上运行。我已将URL硬编码为“ http://localhost:8080/getForm”，依此类推。如果我在与托管主机相同的计算机上访问前端，则一切正常。但是，如果我从另一台机器访问前端，则API调用将失败，这是有道理的，因为这些调用是针对本地主机进行的。

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

进行生产构建并将其与后端捆绑在一起。这再次使访问计算机上的localhost调用失败。
使用window.location.hostname +“ getForm”操纵URL。当我有不同的服务器托管前端和后端时，此操作将失败。

修改* 好的，我设法通过将以下行添加到package.json将代理添加到节点服务器。 "proxy":"http://localhost:8080/" 这样会将前端的localhost：3000 / api / getForm之类的内容转发到后端的localhost：8080 / api / getForm。这工作得很好，但是现在我陷入了一个问题，我认为这是由于CORS设置不正确造成的。到后端的代理GET请求（Spring Boot API）可以正常工作，但是代理的POST请求返回403，响应为“无效的CORS请求”。

我在spring应用程序的类级别添加了@CrossOrigin（origins =“ http：// localhost：3000”），这应该使所有api CORS友好。另外，我在前端使用fetch进行呼叫。有什么线索可能会导致我出错吗？

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

正文-{“ title”：“ abc”，“ body”：“ def”}

响应-403，无效的CORS请求

获取/ api /获取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 接受： / 推荐人：http://localhost:3000/ 接受编码：gzip，deflate，br 接受语言：en-IN，en-GB; q = 0.9，en-US; q = 0.8，en; q = 0.7

响应-200，[{“ id”：1，“ title”：“帖子1”，“ body”：“后端连接良好，花哨！”}]

Answer 1

当您不使用节点提供代码时，可以使用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;

.env文件：

API_PROTOCOL=https
API_HOST=localhost
API_PORT=8000

要将配置转移到前端，您可以在html正文中进行序列化，并在客户端渲染中进行选择。

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

作为回应，如何将后端REST API传递给前端？

1 个答案: