Question

我正在尝试将webUntis＆＃39;（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标题＆＃39; Access-Control-Allow-Origin＆＃39;缺失）。

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

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

Answer 1

您正在向其他网站发出请求，在这种情况下是api.webuntis.dk处的API。这种类型的请求称为“跨源请求”

对于在JavaScript中使用的此类请求，最终需要允许服务器。

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

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

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

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

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

Answer 2

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

Answer 3

什么是CORS？

来自MDN：

跨源资源共享（CORS）是一种使用的机制额外的HTTP标头，以允许用户代理获得访问权限从不同来源（域）的服务器中选择的资源目前正在使用的网站。用户代理生成跨源HTTP 请求来自不同域，协议，或端口，而不是当前文件来源的端口。

<强>解

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

设置示例：

PHP

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

#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 4

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

CORS标题＆＃39;访问控制 - 允许 - 来源＆＃39;不见了

4 个答案: