使用 React 前端进行 AJAX 调用时无法使用 CORS 访问后端 API

Posted 2023-03-04

【中文标题】使用 React 前端进行 AJAX 调用时无法使用 CORS 访问后端 API

【英文标题】：Can't access backend API using CORS when making a AJAX call using React frontend

【发布时间】：2017-01-04 17:37:16

【问题描述】：

我正在尝试创建一个应用程序，该应用程序通过后端获取外部 API 信息并将其传递给我的 React 前端。后端工作正常，我可以调用服务器并获取信息。但是，当我尝试将信息传递到我的前端时，我得到了错误。如果有人能告诉我我做错了什么，那将不胜感激。我整个周末都遇到这个问题。

后端控制器：

网址：

但是，当我通过 react 前端进行 AJAX 调用时，出现此错误：

后端错误：

这是我的其余代码：

导轨： CORS 和应用程序控制器：

铁路路线：

带有 AJAX 调用的 React 组件：

【参考方案1】：

这是CORS 错误。当您从一个域（您的前端托管的地方）到另一个域（您的服务器所在的地方）执行呼叫时，您的服务器应该响应 OPTIONS 请求并提供一些数据，这些数据将满足浏览器的要求。

查看 MDN 了解更多信息：https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS