HTML5 가져 오기 API를 사용하여 Access-Control-Allow-Origin 헤더 허용

HTML5 가져 오기 API를 사용하고 있습니다.

var request = new Request('https://davidwalsh.name/demo/arsenal.json');

fetch(request).then(function(response) {
    // Convert to JSON
    return response.json();
}).then(function(j) {
    // Yay, `j` is a JavaScript object
    console.log(JSON.stringify(j));
}).catch(function(error) {
    console.log('Request failed', error)
});

일반 json을 사용할 수 있지만 위의 api url의 데이터를 가져올 수 없습니다. 오류가 발생합니다.

Fetch API는 https://davidwalsh.name/demo/arsenal.json을 로드 할 수 없습니다 . 요청 된 리소스에 'Access-Control-Allow-Origin'헤더가 없습니다. 따라서 원본 ' http : // localhost '는 액세스가 허용되지 않습니다. 불투명 한 응답이 요구 사항을 충족하는 경우 요청 모드를 'no-cors'로 설정하여 CORS가 비활성화 된 리소스를 가져옵니다.

epascarello가 말했듯이 리소스를 호스팅하는 서버는 CORS를 활성화해야합니다. 클라이언트 측에서 할 수있는 작업 (그리고 아마도 생각하고있는 것)은 CORS로 가져 오기 모드를 설정하는 것입니다 (내가 생각하는 기본 설정 임에도 불구하고).

fetch(request, {mode: 'cors'});

그러나이 여전히 자원을 요청하는 도메인을뿐만 아니라 CORS를 활성화하고 허용하는 서버가 필요합니다.

CORS 문서 와 동일한 출처 정책을 설명하는 이 멋진 Udacity 비디오를 확인하십시오 .

클라이언트 측에서 no-cors 모드를 사용할 수도 있지만 이것은 불투명 한 응답을 제공합니다 (본문을 읽을 수는 없지만 응답은 여전히 ​​서비스 워커가 캐시하거나 일부 API에서 사용할 수 <img>있습니다. :

fetch(request, {mode: 'no-cors'})
.then(function(response) {
  console.log(response); 
}).catch(function(error) {  
  console.log('Request failed', error)  
});

http : // localhost : 3000 에서 실행중인 프런트 엔드 코드 와 http : // localhost : 5000 에서 실행중인 API (백엔드 코드)가 있습니다 .

가져 오기 API를 사용하여 API를 호출했습니다. 처음에는 "cors"오류가 발생했습니다. 그런 다음 백엔드 API 코드에 아래 코드를 추가하여 어디서나 출처와 헤더를 허용합니다.

let allowCrossDomain = function(req, res, next) {
  res.header('Access-Control-Allow-Origin', "*");
  res.header('Access-Control-Allow-Headers', "*");
  next();
}
app.use(allowCrossDomain);

그러나 stage, prod와 같은 다른 환경의 경우 원본을 제한해야합니다.

이것은 나를 위해 일했습니다.

npm install -g local-cors-proxy

CORS 문제가있는 요청하려는 API 엔드 포인트 :

https://www.yourdomain.com/test/list

프록시 시작 :

lcp --proxyUrl https://www.yourdomain.com

 Proxy Active 

 Proxy Url: http://www.yourdomain.com:28080
 Proxy Partial: proxy
 PORT: 8010

그런 다음 클라이언트 코드에서 새 API 엔드 포인트 :

http://localhost:8010/proxy/test/list

최종 결과는 CORS 문제없이 https://www.yourdomain.ie/test/list에 대한 요청입니다 !

나는 이것이 오래된 게시물이라는 것을 알고 있지만이 오류를 수정하는 데 도움이 된 것은 가져 오기 요청에서 도메인 이름을 사용하는 대신 서버의 IP 주소를 사용하는 것입니다. 예를 들면 다음과 같습니다.

#(original) var request = new Request('https://davidwalsh.name/demo/arsenal.json');
#use IP instead
var request = new Request('https://0.0.0.0/demo/arsenal.json');

fetch(request).then(function(response) {
    // Convert to JSON
    return response.json();
}).then(function(j) {
    // Yay, `j` is a JavaScript object
    console.log(JSON.stringify(j));
}).catch(function(error) {
    console.log('Request failed', error)
});

nginx를 사용하는 경우 이것을 시도하십시오

#Control-Allow-Origin access

    # Authorization headers aren't passed in CORS preflight (OPTIONS) calls. Always return a 200 for options.
    add_header Access-Control-Allow-Credentials "true" always;
    add_header Access-Control-Allow-Origin "https://URL-WHERE-ORIGIN-FROM-HERE " always;
    add_header Access-Control-Allow-Methods "GET,OPTIONS" always;
    add_header Access-Control-Allow-Headers "x-csrf-token,authorization,content-type,accept,origin,x-requested-with,access-control-allow-origin" always;

    if ($request_method = OPTIONS ) {
        return 200;
    }

https://expressjs.com/en/resources/middleware/cors.html을 보십시오 . cors를 사용해야합니다.

설치:

$ npm install cors

const cors = require('cors');
app.use(cors());

이 코드를 노드 서버에 넣어야합니다.