React Frontend 与 Go API 集成不同端口问题答案

【问题标题】：React Frontend integrated with Go API different ports problemReact Frontend 与 Go API 集成不同端口问题
【发布时间】：2020-08-20 09:15:42
【问题描述】：

我做了一个特定的 react js 前端，一个 Go API 在不同的端口上运行。 在开发模式下（npm start）通过将代理设置为 package.json 中的 GO API，一切顺利且工作正常。但是，当进入生产或部署模式（ npm run build 然后 npm -s build port xxxx ）时，package.json 中的代理不可读，并且通过 axios 调用 API 不会向代理请求数据.

即使直接给出与端口的完整链接也会在反应中产生跨源问题。

那么关于如何在使用 npm run build 部署时如何在 react js 中设置 axios 以调用在不同端口上运行的 go api 有什么想法吗？

谢谢

【问题讨论】：

您可以使用浏览器扩展来禁用浏览器中的 cors，但是如果您想将内容传递给您的用户，您必须让您的后端允许 cors
或者如果你可以控制服务器，你可以使用 nginx 等设置反向代理。
所以没有办法让它在生产模式下通过在反应应用程序中的某处设置代理而不修改服务器配置或浏览器cors？
@ArefHammadi 代理设置仅用于开发，在生产中没有任何作用。在生产中，您必须确保路径解析。这记录在 cra 文档中。见here。
我尝试将 GO api 中的跨域标头设置为 '*' 并在 react 调用 api 时调用它，但由于跨域被阻止，该请求仍未成功。

标签： node.js reactjs api go npm

【解决方案1】：

您是否使用过 ReactJs Page 的 GO API？ GO API 是直接向公众提供服务还是在 Nginx 或 Apache 之后运行？

也许您需要从浏览器中的开发人员工具中确保请求实际上响应了 cors 问题。如果是，则需要确保网络服务器（Nginx、Apache）不会干扰 cors。或者您只需在您的网络服务器（nginx、apache）配置上进行设置。

【讨论】：

我正在使用这些：npm install -g serve serve -s build 所以直接不使用 nginx 或 apache 服务，它一直说 Cors 被阻止，即使在主函数的 GO API 中允许它。
您是否确保您的 GO API 在飞行前接受请求？比如OPTIONS方法
预检不是用于发布请求吗？我正在使用 axios 获取从 React Js 到 Go Api 的请求。