缺少CORS标头“访问控制允许来源”

Question

我正在尝试将webUntis（文档）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标头“访问控制允许来源”）。

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

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

Answer 1

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

Answer 2

CORS是什么？

来自MDN：

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

解决方案

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

例如：

>

PHP

铁轨

#在配置/应用程序中。rb配置。行动与调度。默认_头={“访问控制允许源”=

注意：将*更改为要允许CORS的特定URL。“*”非常不鼓励使用，除非您提供的公共API是供任何消费者访问的。

Answer 3

您正在向另一个站点发出请求，在本例中是位于api.webuntis.dk的API。这种类型的请求被称为"交叉起源请求"

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

这是通过他们的服务器发送特殊的CORS头来完成的，最基本的一个是“访问-控制-允许-起源”头。

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

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

或者，您可以在URL前面加上https://cors.io像这样：

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