CORS 오류 : 요청 헤더 필드 인증이 프리 플라이트 응답에서 Access-Control-Allow-Headers에 의해 허용되지 않습니다.

Question

한 로컬 호스트 포트에서 다른 로컬 호스트 포트로 요청을 보내려고합니다. 프론트 엔드에서는 angularjs를, 백엔드에서는 노드을 사용하고 있습니다. 이 CORS Node.js를에서 요청을하기 때문에

, 내가

res.header('Access-Control-Allow-Origin', '*'); 
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH'); 
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization'); 

를 사용하고하고 angular.js 서비스 파일에, 나는 내가 무엇입니까

return { 
    getValues: $resource(endpoint + '/admin/getvalues', null, { 
     'get': { 
      method: 'GET', 
      headers:{'Authorization':'Bearer'+' '+ $localStorage.token} 
      } 
    }), 
} 

을 사용하고 있습니다 다음 오류

요청 헤더 필드 인증은 프리 플라이트 응답에서 Access-Control-Allow-Headers가 허용하지 않습니다.

도와주세요!

Answer 1

허용 된 헤더에도 옵션을 추가해야합니다. 브라우저는 원래 요청을 보내기 전에 프리 플라이트 요청을 보냅니다. 서버가이 매개 변수를 사용하여 요청을 보낼 허용 여부를 응답 할 수 있도록 소스 https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS CORS에서

에서

res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,PATCH,OPTIONS'); 

아래 참조 옵션의 방법으로 프리 플라이트 요청이 전송됩니다. Access-Control-Request-Method 헤더는 실제 요청이 전송 될 때 POST 요청 방법과 함께 보내지는 프리 플라이트 요청의 일부로 서버에 알립니다. Access-Control-Request-Headers 헤더는 서버에 실제 요청이 전송 될 때 X-PINGOTHER 및 Content-Type 사용자 지정 헤더와 함께 전송됨을 알립니다. 이제 서버는 이러한 상황에서 요청을 수락할지 여부를 결정할 수 있습니다.

도이 방법을 사용했다 npmjs.com/package/cors NPM의 package.I를 사용하여

당신이 수동 구성을 피할 수 편집, 그것은 명확하고 간단합니다.

Answer 2

cors 라이브러리를 설치하지 않고 원래 코드를 수정하려는 경우 누락 된 다른 단계는 Access-Control-Allow-Origin : *이 잘못되었습니다. 인증 토큰 (예 : JWT)을 전달할 때 서버를 호출하는 모든 URL을 명시 적으로 명시해야합니다. 인증 토큰을 수행 할 때는 "*"를 사용할 수 없습니다.

Answer 3

이것은 API 문제로 Postman/Fielder를 사용하여 API에 HTTP 요청을 보내면이 오류가 발생하지 않습니다. 브라우저의 경우 보안을 위해 실제 요청 (GET/POST/PUT/DELETE)을 보내기 전에 항상 OPTIONS request/preflight를 API에 보냅니다. 따라서 요청 방법이 OPTION 인 경우 "Access-Control-Allow-Headers"에 "Authorization"을 추가해야 할뿐만 아니라 "OPTIONS"를 "Access-Control-allow-methods"에 다음과 같이 추가해야합니다. 잘. 이것은 내가 고정 방법이었다

if (context.Request.Method == "OPTIONS") 
     { 
      context.Response.Headers.Add("Access-Control-Allow-Origin", new[] { (string)context.Request.Headers["Origin"] }); 
      context.Response.Headers.Add("Access-Control-Allow-Headers", new[] { "Origin, X-Requested-With, Content-Type, Accept, Authorization" }); 
      context.Response.Headers.Add("Access-Control-Allow-Methods", new[] { "GET, POST, PUT, DELETE, OPTIONS" }); 
      context.Response.Headers.Add("Access-Control-Allow-Credentials", new[] { "true" }); 

     }