如何解决从 REST API 获取数据时出现'No 'Access-Control-Allow-Origin' header”错误？

从 REST API 获取数据时“请求的资源上不存在‘Access-Control-Allow-Origin’标头”

尝试从 REST API 检索数据时在本地主机上工作时使用 REST API，您可能会遇到错误消息“Fetch API 无法加载。对预检请求的响应未通过访问控制检查：否”请求的资源上存在“Access-Control-Allow-Origin”标头。”此错误源于浏览器强制执行的“同源策略”，限制来自不同来源（域、端口和协议）的资源相互交互。

克服错误

利用CORS 代理

如果您缺乏对托管 REST API 的服务器的控制，并且其响应的唯一问题是缺少所需的Access-Control-Allow-Origin 标头，您可以利用 CORS 代理来促进请求。

以下是设置您自己的代理的步骤：

1. 克隆存储库：git克隆 https://github.com/Rob--W/cors-anywhere.git
2. 导航到克隆的目录：cd cors-anywhere/
3. 安装依赖项：npm install
4. 创建 Heroku 实例：heroku create
5. 部署代理：git push heroku master

部署后，使用生成的代理 URL 作为 REST API URL 的前缀。例如：https://cryptic-headland-94862.herokuapp.com/https://example.com。

避免 CORS 预检

问题中的请求会触发预检请求包含授权标头。要防止这种预检，请考虑使用以下技术之一：

• 在初始请求中省略 Authorization 标头。
• 利用不同的身份验证机制，例如将身份验证数据嵌入到请求正文或查询参数。
• 修改服务器以接受具有 Content-Type 的 POST 请求： application/x-www-form-urlencoded 正文包含 JSON 格式的参数。

解决“Access-Control-Allow-Origin 标头不能是通配符”

对于请求涉及凭证的情况下，如果 Access-Control-Allow-Origin 标头的值为“*”，则浏览器会限制前端 JavaScript 代码对响应的访问。在这种情况下，该值必须与前端代码的来源精确匹配（例如，http://127.0.0.1:3000）。

注意：避免使用 Chrome CORS 插件，因为他们只是将通用的 Access-Control-Allow-Origin: * 标头注入到响应中，这可能会导致意外的行为。使用带有 -H 标志的curl 命令进行可靠的测试。

以上是如何解决从 REST API 获取数据时出现'No 'Access-Control-Allow-Origin' header”错误？的详细内容。更多信息请关注PHP中文网其他相关文章！