각도 인터셉터 및 CORS

Question

Angular를 사용하여 모든 HTTP 요청에 토큰을 추가하는 인터셉터를 작성하려고합니다. 여기에 주어진 조리법을 대략 사용하고 있습니다. - https://thinkster.io/interceptors

그래서 코드는 http 모듈 공장과 tokenInterceptor() 기능을 사용합니다. 요청에 헤더로 토큰을 추가 할 수 있습니다. 그러나 이제는 인터셉터를 통과 할 때 CORS 차단 메커니즘에 의해 차단됩니다. 크롬 콘솔에서이 오류가 발생합니다. -

XMLHttpRequest에서 http://127.0.0.1을로드 할 수 없습니다. 프리 플라이트 요청에 대한 응답이 액세스 제어 검사를 통과하지 못합니다. 아니요 요청한 리소스에 'Access-Control-Allow-Origin'헤더가 있습니다. 원점 'http://127.0.0.1 : /'는 이므로 액세스가 허용되지 않습니다. 나는 온라인으로 몇 가지 제안을 시도했지만 아무것도 도움이되지

config.headers['Access-Control-Allow-Origin'] = '*'; 

: 응답은 내가 아무 소용이 내 요격에 아래와 같이 출처 헤더 액세스 제어를 허용 설정 시도 HTTP 상태 코드 (403)

했다. CORS 관련 문제를 해결하기 위해 클라이언트 측에서 수행해야 할 작업이 모두 필요합니까? 아니면 모두 서버 측에서 우려합니까?

는

Answer 1

요청에 응답하는 것 서버가 아니라 GET 및 POST 요청에 대한 OPTIONS 요청에 대한 Access-Control-Allow-Origin 응답 헤더를 보낼 필요가있다.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests

프리 플라이트 요청에 대한 응답이 오류는 액세스 제어 확인을 브라우저가 당신을 제공

이유를 통과하지 않습니다 : 그것은 당신이 만들려고 노력하고있는 실제 요청을 시도하기 전에 프론트 엔드 JS 코드에서 브라우저가 OPTIONS 요청을 보내 서버가 사용자가하려는 종류의 요청을 수신하도록 선택했음을 나타내는 방식으로 응답하는지 확인합니다.

그래서 서버 측 코드는 OPTIONS 요청, Access-Control-Allow-Origin와 Access-Control-Allow-Headers & Access-Control-Allow-Methods을의 응답을 처리 추가 할 필요가있다.

CORS 관련 문제를 해결하기 위해 클라이언트 측에서 수행해야 할 작업이 모두 있습니까? 아니면 모든 서버 측 문제입니까?

동작을 변경하거나 브라우저에서 오류를 표시하지 않도록 할 수있는 방법은 없습니다. CORS 구성은 모두 서버 측 문제입니다. 서버가 OPTIONS을 처리해야합니다.

응답

는 HTTP 상태 코드 인증의 실패를 나타내는 403

했다.이는 서버가 OPTIONS 요청에 대해 성공 응답 (200 또는 204)을 보내도록 구성되지 않았기 때문일 수 있습니다.이 경우에는 또는 204에 오른쪽 Access-Control-Allow-* 헤더를 보내고 응답 본문) - 권한 부여가 필요한 요청을 보내려고하면 권한 부여가 실패하기 때문일 수 있습니다.