CORS頭'訪問控制 - 允許 - 起源'缺失

我正在嘗試爲學校項目使用webUntis'（docs）API。現在我只是試圖建立任何類型的連接到API。CORS頭'訪問控制 - 允許 - 起源'缺失

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密鑰錯誤？

聲明：該錯誤消息是從德語翻譯的。

來源

2017-10-17 human being

看起來你並沒有要求你自己的服務器，而是直接到'https：// api.webuntis.dk/api/status'你應該創建一個路由，請求你的本地服務器，然後使請求服務器到服務器 – JoseAPL

首先，頭部'Access-Control-Allow-Origin'應該在請求的文件頭上，而不是在你的請求中。 – Zenoo

這基本上意味着這個API沒有被配置爲從另一個網頁被調用。跨域指的是從一個域（源）向另一個域發起HTTP請求。該API旨在用於服務器應用程序。如果您需要從網頁中調用它，您需要創建一個簡單的代理服務器，以便您的網頁可以調用，這將向webUntis發出請求。

來源

2017-10-17 08:13:50 Bill

向服務器發送Access-Control-Allow-Origin不會解決任何問題。服務器必須將Access-Control-Allow-Origin設置爲*發送到瀏覽器以允許運行Ajax請求。

來源

2017-10-17 08:13:57

您在api.webuntis.dk製作到另一個站點的請求，在這種情況下，API。這種類型的請求被稱爲「跨源請求」

對於這種請求在JavaScript中工作，服務器在他們的最終需要允許他們。

這是通過他們的服務器發送特殊的CORS頭來完成的，最基本的頭是「訪問控制允許來源」頭。

我猜API提供商沒有預見或計劃在此API必須從前端（如JavaScript的瀏覽器）使用的，所以你就必須解決這個問題。

一種方法是建立自己的服務器並讓JavaScript代碼對您的服務器和服務器然後對API的請求的請求，如服務器端代碼沒有被綁定到CORS標頭。

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

來源

2017-10-17 08:16:49 geekonaut

什麼是CORS：

或者，嘗試的東西出來，你可以用https://cors.io喜歡這個前綴的網址？

從MDN：

跨來源資源共享（CORS）是使用其他HTTP標頭讓用戶代理增益允許從服務器訪問一個不同的原點選定資源的機制（域）比當前正在使用的網站。當用戶代理請求來自與當前文檔所源自的不同域，協議，或端口的資源時，請求跨源HTTP 請求。

SOLUTION

您需要設置服務器中的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' => %w{GET POST OPTIONS}.join(",") }

注意：將*更改爲您想要允許CORS的特定URL。 '*'非常不鼓勵，除非您提供的公共API旨在被任何外部消費者訪問。

來源

2017-10-17 08:20:32

您應該提供答案的第一部分的歸屬。這是[從MDN複製]（https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS） – Cerbrus

CORS頭'訪問控制 - 允許 - 起源'缺失

回答

相關問題