CORS 문제

WHO

STATUS

solved

WHEN

Dec 14, 2021

👿 Problem


origin 'http://localhost:3000' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: 
The value of the 'Access-Control-Allow-Origin' header in the 
response must not be the wildcard '*' 
when the request's credentials mode is 'include'. 
The credentials mode of requests initiated by the XMLHttpRequest 
is controlled by the withCredentials attribute.

프론트와 서버가 다른 url일 경우, CORS로 다른 origin에 대한 요청을 허용해줘야 함.

😇 Solution

서버와 프론트의 credentials를 맞춰야 하는 문제.

프론트: 요청시 withCredentials: true

백앤드: 응답시 Access-Control-Allow-Credentials : true

이때, Access-Control-Allow-Origin : "*" 일 경우 (특정 Origin만 허용하지 않고 모든 origin을 허용하겠다는 뜻이기 때문에 ) withCredential: true와 함께 사용할 수 없다.


"Access-Control-Allow-Origin' header in 
the response must not be the wildcard '*' 
when the request's credentials mode is 'include"

🧐 Reference

[WEB] withCredentials 옵션

먼저 CORS은 다른 origin에 대한 요청을 허용하는 정책입니다. 같은 origin에서 http 통신을 하는 경우 알아서 cookie가 request header에 들어가게 됩니다. 우리가 신경쓰지 않아도 말이죠. 하지만 origin이 다른 http 통신에서는 request header에 쿠키가 자동으로 들어가지 않습니다. 우리가 설정을 해주어여 하죠. request header에 쿠키가 없으면 "서버는 내가(클라이언트)가 누군지 모르겠죠?

https://kosaf04pyh.tistory.com/152