缺少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请求被阻止:相同的源策略禁止在https://api.webuntis.dk/api/status上读取外部资源 (原因:缺少CORS Header'Access-Control-Allow-Origin').

怎么可以解决这个问题？也许我的API密钥错了？

免责声明:错误消息是从德语翻译的.

Answer 1

您正在向另一个站点发出请求,在这种情况下是API api.webuntis.dk.这种类型的请求称为"跨源请求"

对于在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。