CORS

CORS?

Cross Origin Resource Sharing

Origin 사이의 자원 공유를 의미하며

서로 다른 Origin 사이의 자원 공유를 차단하는 동일 출처 정책을 따른다.

Origin, 정책?

Origin?

출처를 의미하며 [ Protocol + Host + Host ] 세 가지를 합친 것을 의미한다.

동일 출처 정책?

XMLHttpRequest와 Fecth API는 동일 출처 정책을 따른다.

same-origin policy은

어떤 Origin 에서 불러온 문서나 스크립트가 다른 Origin 에서 가져온 리소스와 상호작용 하는 것을

제한하는 중요한 보안 방식이다.

동일 출처 정책은 잠재적으로 해로울 수 있는 문서를 분리함으로써

공격 받을 수 있는 경로를 줄여준다.

대표적으로 XMLHttpRequest 와 Fecth API 등의 요청이 동일 출처 정책을 사용한다.

CORS ERROR?

대부분의 경우는 localhost:3000 과 같은 개발 환경에서

API 호출을 할 때 에러를 겪게 된다.

가장 대표적인 이유는 서버 측에서 허용한 origin을 통해서 접근하지 않았기 때문이다.

에러가 발생해서 열심히 수정하고 테스트를 해보는데

만약 테스트 환경이 PostMan 일 경우 전혀 의미가 없다.

엄밀히 말하면 CORS ERROR 는 브라우저에서 던지는 것이다.

위의 과정을 설명하면
1. 개발 환경에서 브라우저에 API CALL REQUEST
2. 브라우저에서 RESOURCE ORIGIN 에 요청
3. RESOURCE ORIGIN 에서 브라우저에 요청한 데이터를 응답
4. 브라우저에서 REQUEST 와 RESPONSE 의 ORIGIN비교
5. 서로 다른 ORIGIN 이라면 CORS ERROR 반환

때문에 별도의 환경에서 테스트한다면 문제 없이 결과를 응답 받게 된다.

해결 방법?

백엔드

서버에서 응답 헤더에 특정 헤더를 포함하는 방식으로 해결할 수 있다.

• Access-Control-Allow-Origin: 특정 브라우저가 리소스에 접근이 가능하도록 허용
• Access-Control-Allow-Method: 특정 HTTP Method만 리소스에 접근이 가능하도록 허용
• Access-Control-Expose-Headers: 자바스크립트에서 헤더에 접근할 수 있도록 허용
• credentials: 쿠키 등의 인증 정보를 전달

프론트엔드

백엔드 서버의 응답 헤더를 수정 할 수 없다면 차용하는 방법.

• CRA 환경에서 적용 가능한 방법이다.
  • package.json / proxy : 접근하고자 하는 출처의 origin 을 Value로 설정
• 다른 방법으로는 프록시 서버를 사용하는 방법인데
  브라우저에서 서버에 보내는 요청을 프론트엔드에서 받아서 직접 서버에 요청하는 방식이다.

이후 응답받은 데이터를 브라우저에 업데이트 시켜주면 된다. (안써봄)

• Chorme Extention : Allow CORS 를 설치하면 간단하게 해결된다. (치트키)