Javascript 缺少 CORS 标头“Access-Control-Allow-Origin”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46785318/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
The CORS Header 'Access-Control-Allow-Origin' is missing
提问by x d
I'm trying to use webUntis'(docs) API for a school project. For now I'm just trying to establish any kind of connection to the API.
我正在尝试将 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);
}
};
This code produces the following error message:
此代码产生以下错误消息：
Cross-Origin request blocked: The same origin policy prohibits the reading of the external resource at https://api.webuntis.dk/api/status(Reason: CORS Header 'Access-Control-Allow-Origin' is missing).
跨域请求被阻止：同源策略禁止在https://api.webuntis.dk/api/status读取外部资源 （原因：缺少 CORS Header 'Access-Control-Allow-Origin'）。
How may this problem be solved? Perhaps my API key is wrong?
如何解决这个问题？也许我的 API 密钥是错误的？
Disclaimer: The error message was translated from German.
免责声明：错误消息是从德语翻译过来的。
回答by geekonaut
You are making a request to another site, in this case the API at api.webuntis.dk. This type of request is called a "Cross Origin Request"
您正在向另一个站点发出请求，在本例中是api.webuntis.dk. 这种类型的请求称为“跨源请求”
For such requests to work in JavaScript, the server on their end needs to allow them.
为了让此类请求在 JavaScript 中工作，它们端的服务器需要允许它们。
This is done by their server sending special CORS headers, the most basic one being the "Access-Control-Allow-Origin" header.
这是通过他们的服务器发送特殊的 CORS 标头来完成的，最基本的一个是“Access-Control-Allow-Origin”标头。
I guess the API provider has not foreseen or planned for this API to be used from a frontend (e.g. JavaScript in the browser), so you would have to work around this.
我猜 API 提供者没有预见或计划从前端（例如浏览器中的 JavaScript）使用这个 API，所以你必须解决这个问题。
One way is to set up your own server and have the JavaScript code make a request to your server and your server then making a request to the API, as server side code is not bound to CORS headers.
一种方法是设置您自己的服务器并让 JavaScript 代码向您的服务器发出请求，然后您的服务器向 API 发出请求，因为服务器端代码未绑定到 CORS 标头。
Alternatively, to try things out, you can prefix the URL with https://cors.iolike this:
或者，要尝试一下，您可以使用以下前缀作为 URL https://cors.io：
const url = 'https://cors.io/?https://api.webuntis.dk/api/status';
回答by Adrian Rotama
What is CORS ?
什么是 CORS？
from MDN:
来自MDN：
Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to let a user agent gain permission to access selected resources from a server on a different origin (domain) than the site currently in use. A user agent makes a cross-origin HTTP request when it requests a resource from a different domain, protocol, or port than the one from which the current document originated.
跨域资源共享 (CORS) 是一种机制，它使用额外的 HTTP 标头让用户代理获得从与当前使用的站点不同的源（域）上的服务器访问所选资源的权限。当用户代理从不同于当前文档来源的域、协议或端口请求资源时，它会发出跨域 HTTP 请求。
SOLUTION
解决方案
You need to settings the CORS permission in your server. (https://api.webuntis.dk/api/status)
您需要在服务器中设置 CORS 权限。( https://api.webuntis.dk/api/status)
Setting Example :
设置示例：
PHP
<?php header("Access-Control-Allow-Origin: *");Rails
#in config/application.rb config.action_dispatch.default_headers = { 'Access-Control-Allow-Origin' => '*', 'Access-Control-Request-Method' => %w{GET POST OPTIONS}.join(",") }
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(",") }
note: Change * to specific URL that you want to allow CORS. '*' is highly discouraged, unless you are providing a public API that is intended to be accessed by any consumer out there.
注意：将 * 更改为要允许 CORS 的特定 URL。非常不鼓励使用“*”，除非您提供的公共 API 旨在供任何消费者访问。
回答by Bill
It basically means that this API is not configured to be called from another web page. Cross-Origin refers to making an HTTP request from one domain (origin) to another. This API is meant to be used from a server application. If you need to call it from a web page, you'll need to create a simple proxy server that your web page can call which will make the request to webUntis.
这基本上意味着此 API 未配置为从另一个网页调用。跨域是指从一个域（源）向另一个域（源）发出 HTTP 请求。此 API 旨在从服务器应用程序中使用。如果您需要从网页调用它，您需要创建一个简单的代理服务器，您的网页可以调用它来向 webUntis 发出请求。
回答by Paun Narcis Iulian
Sending Access-Control-Allow-Origin to the server solves nothing. Server has to send Access-Control-Allow-Origin set to * to your browser to allow ajax requests to run.
将 Access-Control-Allow-Origin 发送到服务器并没有解决任何问题。服务器必须将 Access-Control-Allow-Origin 设置为 * 发送到您的浏览器以允许 ajax 请求运行。
