CORS头'访问控制 - 允许 - 起源'缺失

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标头“访问 - Control-Allow-Origin'缺失）。

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

声明：该错误消息是从德语翻译的。

Answer 1

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

Answer 2

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

Answer 3

您在api.webuntis.dk制作到另一个站点的请求，在这种情况下，API。这种类型的请求被称为“跨源请求”

对于这种请求在JavaScript中工作，服务器在他们的最终需要允许他们。

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

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

一种方法是建立自己的服务器并让JavaScript代码对您的服务器和服务器然后对API的请求的请求，如服务器端代码没有被绑定到CORS标头。

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

Answer 4

什么是CORS：

或者，尝试的东西出来，你可以用https://cors.io喜欢这个前缀的网址？

从MDN：

跨来源资源共享（CORS）是使用 其他HTTP标头让用户代理增益允许从服务器访问一个不同的原点 选定资源的机制（域）比当前正在使用的网站 。当用户代理请求来自与当前文档所源自的不同域，协议， 或端口的资源时，请求跨源HTTP 请求。

SOLUTION

您需要设置服务器中的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旨在被任何外部消费者访问。