时间戳

首页 > 解决方案 > 如何摆脱 React.js 中的 NO ACCESS CONTROL ORIGIN 错误？

javascript - 如何摆脱 React.js 中的 NO ACCESS CONTROL ORIGIN 错误？

问题描述

我正在尝试从我使用 React.js 的 fetch 方法的 API 中获取数据。但我经常看到这个错误

CORS 策略已阻止https://api.edamam.com/search?q=chicken&app_id=${APP_ID}&app_key=${APP_KEY}从源获取的访问权限：请求的资源上不存在“Access-Control-Allow-Origin”标头。http://localhost:3000如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

我禁用了扩展等，但我想这需要在请求中添加一些额外的标头等。请帮忙。

标签： javascriptreactjsreact-nativereact-hooks

解决方案

这个问题与 React 无关，而是与 CORS 相关。从文档

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin. A web application executes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, or port) from its own.

这是需要在服务器端解决的问题。需要添加的不是标头中的请求，而是响应中的请求。具体来说，您需要添加Access-Control-Allow-Origin.

要了解 CORS 存在的原因，请考虑我创建了一个可以代表您向 Gmail 发出网络请求的网站。这使我能够阅读您的电子邮件。浏览器会阻止这种情况，因此只有 Gmail 可以读取 Gmail。

您的问题可能还有其他解决方案，具体取决于您尝试与之通信的 API、您的设置以及您有哪些限制。如果您正在使用create-react-app，快速修复可能是将其添加到您的package.json：

"proxy": "https://api.edamam.com",

现在https://api.edamam.com从您的 fetch 调用中删除。所以代替fetch('https://api.edamam.com/path/to/server'), 你需要做fetch('/path/to/server'), 注意你需要重启开发服务器。您可以在此处阅读有关其工作原理的更多信息

推荐阅读