缺少 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);
    }
};

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

跨域请求被阻止：同源策略禁止 在https://api.webuntis.dk/api/status 读取外部资源 （原因：缺少 CORS 标头“Access-Control-Allow-Origin”）。

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

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

Answer 1

您正在向另一个站点发出请求，在本例中是 api.webuntis.dk 的 API。这种类型的请求称为“跨域请求”

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

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

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

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

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

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

Answer 2

什么是 CORS？

来自MDN：

跨域资源共享 (CORS) 是一种使用 额外的 HTTP 标头让用户代理获得访问权限 从不同来源（域）上的服务器中选择的资源 当前使用的站点。用户代理创建跨域 HTTP 请求从不同的域、协议、 或端口，而不是当前文档的来源。

解决方案

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

设置示例：

1. PHP

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

2. 导轨

   #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 旨在供任何消费者访问。

Answer 3

这基本上意味着此 API 未配置为从另一个网页调用。跨域是指从一个域（源）向另一个域（域）发出 HTTP 请求。此 API 旨在从服务器应用程序中使用。如果您需要从网页调用它，您需要创建一个简单的代理服务器，您的网页可以调用它来向 webUntis 发出请求。

Answer 4

向服务器发送 Access-Control-Allow-Origin 解决不了任何问题。服务器必须将 Access-Control-Allow-Origin 设置为 * 发送到您的浏览器以允许运行 ajax 请求。