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); 
    } 
}; 

이 코드는 다음과 같은 오류 메시지를 생성 동일 출처 정책은 https://api.webuntis.dk/api/status (이유에서 외부 자원의 읽기를 금지 : CORS 헤더 '액세스 - Control-Allow-Origin '이 누락되었습니다).

이 문제를 어떻게 해결할 수 있습니까? 아마도 내 API 키가 잘못 되었나요?

면책 조항 : 오류 메시지가 독일어에서 번역되었습니다.

Answer 1

기본적으로이 API는 다른 웹 페이지에서 호출하도록 구성되어 있지 않습니다. Cross-Origin은 한 도메인 (원점)에서 다른 도메인 (원점)으로 HTTP 요청을하는 것을 말합니다. 이 API는 서버 응용 프로그램에서 사용하기위한 것입니다. 웹 페이지에서 호출해야하는 경우 웹 페이지에서 호출 할 수있는 간단한 프록시 서버를 만들어야 webUntis에 요청할 수 있습니다.

Answer 2

서버에 Access-Control-Allow-Origin을 보내는 것은 아무 것도 해결하지 못합니다. 서버는 Ajax 요청을 허용하기 위해 브라우저에 *로 설정된 액세스 제어 허용 원점을 전송해야합니다.

Answer 3

다른 사이트 (이 경우 API는 api.webuntis.dk)에 요청하고 있습니다. 이러한 유형의 요청을 "교차 원어 요청"이라고합니다.

이러한 요청이 JavaScript에서 작동하려면 서버의 끝에는이 필요합니다.

이 작업은 서버에서 특수 CORS 헤더를 보내고 가장 기본적인 것이 "Access-Control-Allow-Origin"헤더입니다.

API 제공 업체는이 API가 프론트 엔드 (예 : 브라우저의 자바 스크립트)에서 사용되도록 예측하거나 계획하지 않았기 때문에이 문제를 해결해야합니다.

한 가지 방법은 서버 측 코드가 CORS 헤더에 바인딩되어 있지 않기 때문에 자체 서버를 설정하고 자바 스크립트 코드로 서버와 서버에 요청한 다음 API에 요청하는 것입니다.

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

Answer 4

CORS 무엇인가

는 다른 방법으로, 물건을 사용해,이 같은 https://cors.io와 함께 URL을 접두사 수 있습니까? 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(",") }

,745,

참고 : CORS를 허용하려는 특정 URL로 *를 변경하십시오. '*'는 다른 사용자가 액세스 할 수있는 공개 API를 제공하지 않는 한 매우 권장하지 않습니다.