CORS 标头“Access-Control-Allow-Origin”缺失错误答案

【问题标题】：CORS header 'Access-Control-Allow-Origin' missing ErrorCORS 标头“Access-Control-Allow-Origin”缺失错误
【发布时间】：2021-12-02 04:27:15
【问题描述】：

我目前正在为 chrome 构建仪表板。我试图通过 coin gecko 的 API 获取信息，在仪表板上显示硬币价格。当我运行我的代码“Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.coingecko.com/api/v3/coins/dogecoin. (Reason: CORS header 'Access-Control-Allow-Origin' missing)”时出现此错误，并且当我尝试在 coin gecko API V3 站点上执行时遇到同样的错误。

这是我的代码：

fetch("https://api.coingecko.com/api/v3/coins/dogecoin") .then(response => response.json()) .then(data =>console.log(data)) .catch(err => console.log(err))

【问题讨论】：

您必须将这个提到的标头添加到服务器上的响应中。如果您不控制服务器，请询问控制服务器的人......
有问题的请求是一个simple GET 请求，它的响应包含Access-Control-Allow-Origin: *。因此，它不应该导致 CORS 错误。一定有什么你没有告诉我们的……
@jub0bs 即使我尝试在 coin gecko 网站上执行它，我也会收到同样的错误

标签： javascript cors fetch-api

【解决方案1】：

为了让此类请求在 JavaScript 中工作，服务器端需要允许它们。

这是通过他们的服务器发送特殊的 CORS 标头来完成的，最基本的是“Access-Control-Allow-Origin”标头。

我猜 API 提供者没有预见或计划从前端使用这个 API（例如浏览器中的 JavaScript），所以你必须解决这个问题。

一种方法是设置您自己的服务器并让 JavaScript 代码向您的服务器发出请求，然后您的服务器向 API 发出请求，因为服务器端代码未绑定到 CORS 标头 set Header('Access-Control-Allow-Origin','*')

【讨论】：