HTTP header CORS 설정

HTTP header CORS 설정

notion image

HTTP header

Access-Control-Allow-Origin

서버에서 특정 Origin으로부터의 요청을 허용할지에 대해서 나타냅니다.

Origin을 *로 모든 요청으로 허용시킬 경우 보안상 문제가 될 수 있습니다.

*same origin이란? protocol과 Host, Port 3가지가 동일한 Origin

Access-Control-Allow-Methods

응답으로 허용할 HTTP Method를 지정합니다.

Access-Control-Allow-Credentials

credentials 옵션은 브라우저가 요청(req)에 인증에 관련된 정보(쿠키)를 담을 수 있게 해주는 옵션

fetch API에서의 credentials 옵션	ㅤ
same-origin (기본값)	같은 출처 간 요청에만 인증 정보를 담을 수 있다
include	모든 요청에 인증 정보를 담을 수 있다
omit	모든 요청에 인증 정보를 담지 않는다

서버에서도 응답 header에 Access-Control-Allow-Credentials 설정을 해야합니다.

false로 설정하거나 생략시에는 Credential 요청을 처리할 수 없습니다.

또한 Credentials 옵션을 same-origin 또는 include로 요청(request)할시에는

Allow-Origin에는 *를 사용할 수 없고 Origin을 명시해야합니다.

Reason: Credential is not supported if the CORS header 'Access-Control-Allow-Origin' is '*' - HTTP | MDN

The CORS request was attempted with the credentials flag set, but the server is configured using the wildcard ("*") as the value of Access-Control-Allow-Origin, which doesn't allow the use of credentials.

Reason: Credential is not supported if the CORS header 'Access-Control-Allow-Origin' is '*' - HTTP | MDN

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials

Reason: Credential is not supported if the CORS header 'Access-Control-Allow-Origin' is '*' - HTTP | MDN

예시코드

Client

Server

참고

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

CORS는 왜 이렇게 우리를 힘들게 하는걸까?

이번 포스팅에서는 웹 개발자라면 한번쯤은 얻어맞아 봤을 법한 정책에 대한 이야기를 해보려고 한다. 사실 웹 개발을 하다보면 CORS 정책 위반으로 인해 에러가 발생하는 상황은 굉장히 흔해서 누구나 한 번 정도는 겪게 된다고 해도 과언이 아니다.

CORS는 왜 이렇게 우리를 힘들게 하는걸까?

https://evan-moon.github.io/2020/05/21/about-cors/

CORS는 왜 이렇게 우리를 힘들게 하는걸까?

CORS 정책 관련 참고글 - jaytsol님의 블로그 - 인프런 | 커뮤니티

CORS 정책 관련 참고글 - https://evan-moon.github.io/2020/05/21/about-cors/ 대충 요약하면.. 기본적으로 SOP(Same-Origin-Policy)라는 '같은 출처에서만 리소스를 공유할 수 있...

CORS 정책 관련 참고글 - jaytsol님의 블로그 - 인프런 | 커뮤니티

https://www.inflearn.com/blogs/1487

🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏

악명 높은 CORS 에러 메세지 웹 개발을 하다보면 반드시 마주치는 멍멍 같은 에러가 바로 CORS 이다. 웹 개발의 신입 신고식이라고 할 정도로, CORS는 누구나 한 번 정도는 겪게 된다고 해도 과언이 아니다. 프론트엔드 개발자 입장에선 요청 코드를 이상하게 적은것도 아니고, 백엔드 개발자 입장에선 서버 코드나 세팅이 이상한것도 아니다. 모든게 멀쩡한데 왜 요청한 자료에 대한 응답을 시뻘건 에러줄로 확답하는게 문제이다. 🤬 이러한 현상이 일어나는 이유는, 웹 브라우저는 HTTP 요청에 대해서 어떤 요청을 하느냐에 따라 각기 다른 특징을 가지고 있기 때문이다. 요청 방식에 따라 다른 CORS 발생 여부 1. , , 2. XMLHttpRequest, Fetch API 스크립트 → 기본적으로 Same-Or..

🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏

https://inpa.tistory.com/entry/WEB-📚-CORS-💯-정리-해결-방법-👏

🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏

CORS에 대해 알아봅시다.

https://velog.io/@logqwerty/CORS