缺少 CORS 标头“Access-Control-Allow-Origin”

Question

我正在尝试将 webUntis’( docs ) API 用于学校项目。现在我只是想建立任何类型的 API 连接。

 var result;
const url = 'https://api.webuntis.dk/api/status';
var xhr = new XMLHttpRequest();

xhr.open('GET',url, true);
xhr.setRequestHeader('Access-Control-Allow-Origin','*');
xhr.setRequestHeader('Content-type','application/json');
xhr.setRequestHeader('Access-Control-Allow-Methods','GET');
xhr.setRequestHeader('X-API-KEY', '/*API KEY*/');
xhr.send();

xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        result = xhr.responseType;
        console.log(result);
    }
};

此代码产生以下错误消息：

Cross-Origin request blocked：同源策略禁止读取 https://api.webuntis.dk/api/status 的外部资源（原因：缺少 CORS Header ‘Access-Control-Allow-Origin’）。

如何解决这个问题？也许我的 API 密钥是错误的？

免责声明：错误消息是从德语翻译而来的。

原文由 x d 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您正在向另一个站点发出请求，在这种情况下，API 位于 api.webuntis.dk 。这种类型的请求称为“跨源请求”

为了在 JavaScript 中运行此类请求， 它们端的服务器需要允许它们。

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

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

一种方法是设置您自己的服务器并让 JavaScript 代码向您的服务器发出请求，然后您的服务器向 API 发出请求，因为服务器端代码未绑定到 CORS 标头。

或者，要尝试一下，您可以在 URL 前加上 https://cors.io ，如下所示：

 const url = 'https://cors.io/?https://api.webuntis.dk/api/status';

原文由 geekonaut 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

什么是 CORS？

来自 MDN ：

跨源资源共享 (CORS) 是一种机制，它使用额外的 HTTP 标头让用户代理获得从与当前正在使用的站点不同的源（域）上的服务器访问选定资源的权限。当用户代理从不同于当前文档来源的域、协议或端口请求资源时，它会发出跨源 HTTP 请求。

解决方案

您需要在服务器中设置 CORS 权限。 ( https://api.webuntis.dk/api/status )

设置示例：

1. PHP

<?php header("Access-Control-Allow-Origin: *");

1. 导轨

#in config/application.rb config.action_dispatch.default_headers = { 'Access-Control-Allow-Origin' => '*', 'Access-Control-Request-Method' => %w{GET POST OPTIONS}.join(",") }

注意：将 \* 更改为您要允许 CORS 的特定 URL。强烈建议不要使用“*”，除非您提供旨在供任何消费者访问的公共 API。

原文由 Adrian Rotama 发布，翻译遵循 CC BY-SA 3.0 许可协议