缺少 CORS 标头“Access-Control-Allow-Origin”

Posted 2023-03-04

【中文标题】缺少 CORS 标头“Access-Control-Allow-Origin”

【英文标题】：The CORS Header 'Access-Control-Allow-Origin' is missing

【发布时间】：2018-03-28 20:38:50

【问题描述】：

我正在尝试将 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 读取外部资源 （原因：）。

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

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

【问题讨论】：

看起来你不是在请求自己的服务器，而是直接向https://api.webuntis.dk/api/status 创建路由，请求本地服务器，然后将请求服务器发送到服务器

首先，标头Access-Control-Allow-Origin应该在请求的文件头上，而不是在你的请求中。

这能回答你的问题吗？ CORS header 'Access-Control-Allow-Origin' missing

【参考方案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';

【讨论】：

不幸的是 cors.io 不再可用。有其他网站吗？

有corsproxy.github.io 但请记住：这仅用于测试/开发目的，不用于生产用途！对于生产使用，要么通过您自己的服务器代理它，要么设置您自己的 CORS 代理。

【参考方案2】：

什么是 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' => %wGET POST OPTIONS.join(",")

注意：将 * 更改为您希望允许 CORS 的特定 URL。强烈建议不要使用“*”，除非您提供的公共 API 旨在供任何消费者访问。

【讨论】：

您应该为答案的第一部分提供署名。那是copied from MDN

【参考方案3】：

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

【参考方案4】：

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