Access to XMLHttpRequest at ... from origin ... has been blocked by CORS policy: Response to preflight request doesn't pass access control check:

https://velog.io/@suxxzzy/Access-to-XMLHttpRequest-at-...-from-origin-...-has-been-blocked-by-CORS-policy-Response-to-preflight-request-doesnt-pass-access-control-check

Access to XMLHttpRequest at ... from origin ... has been blocked by CORS policy: Response to preflight request doesn't pass acce

 

 

Oauth 스프린트 진행 중 마주한 cors에러이다.
이는 서버측에 auth code를 전달하기 위해 axios.post 요청에서
withcredentials: true 설정을 해 준 것 때문이었는데 좀 더 자세한 이유를 보고자 한다.(위의 cors 에러 때문에 아래의 post 요청도 에러가 나는 것을 확인할 수 있었다.
이런 에러는 이미지를 불러오는 요청이든, auth code를 서버에 보내는 요청이든 다 동일하게 발생하였다. )

 

에러 내용을 말 그대로 해석해보자
http://localhost:3000에서 http://localhost:8080/callback로 ajax요청을 보냈는데 금지되었다.
예비 요청에 대한 응답이 access control check 과정을 통과하지 못했다는 뜻이다.
응답 메세지에 있는 Access-control-allow-credentials 헤더가 지금은 아무것도 없는 빈 값이다('')

나는 요청을 보낼 때 withCredentials: true 라고 설정(=request의 credntials 모드가 include라는 뜻)을 해 주었는데,
이렇게 되면 Access-control-allow-credentials헤더의 값도 무조건 true여야,
클라이언트가 응답을 받아들인다. 그러므로, withCredentials: true 헤더를 제거하여야 한다.

또는 헤더를 그대로 두고, 공식문서에서 언급한대로 다음의 옵션을 주는 방법도 있다.

credentials: Configures the Access-Control-Allow-Credentials CORS header. Set to true to pass the header, otherwise it is omitted.

응답의 credentials 헤더 부분을 true로 설정한 게 없었기 때문에, 클라이언트 측에서는 응답 메세지의 Access-Control-Allow-Credentials헤더가 설정이 안되있네? 그럼 이 응답은 버려야지! 라고 에러를 출력하는 것이다.

진짜 되는지 확인하려고 아래와 같이 고쳤더니 진짜 해결됐다.

cors({ origin: true, credentials: true })

그럼 위의 에러메세지 중 request의 credntials 모드가 include라는 건 무슨 뜻인가?
fetch 메서드에서 credentials: include로 설정 시, 응답의 access-control-allow-origin의 값은 명시적인 url이어야 한다. 로 쓰면 안된다는 뜻이다.
실제로 withCredentials: true 설정해준 것 때문에 서버의 origin을 ""로 설정하게 되면 에러가 났다.

현재 서버 측에는 cors 설정이 다음과 같이 되어 있었다.

app.use(
  cors({ origin: true })
);

origin이 true라는 건 뭔 말인가?
공식문서 의 Configuration Options에서 발췌

origin: Configures the Access-Control-Allow-Origin CORS header. Possible values:
Boolean - set origin to true to reflect the request origin, as defined by req.header('Origin'), or set it to false to disable CORS.

쉽게말해 origin은 Access-Control-Allow-Origin 헤더 설정하는 부분임
허용할 요청의 출처, 즉 어느 곳에서 들어올지를 정하는 옵션이다.
true로 설정하게 되면 요청을 하는 곳의 주소는 접근을 허용하겠다는 뜻이다.

...

다시 정리하는 cors 옵션 설정 방법 예시

cors({
  "origin": "*",
  "methods": "GET,HEAD,PUT,PATCH,POST,DELETE", //배열도 가능
  "preflightContinue": false,
  "optionsSuccessStatus": 204
})

Suxxzzy.log

suxxzzy (Suxxzzy.log) / 작성글 - velog

 

 

 

---

 

 

✅ 요점 정리

1. withCredentials: true를 클라이언트에서 설정하면

👉 브라우저가 쿠키나 인증 정보를 포함한 요청을 보냅니다.
이게 일반적인 **cross-origin 요청(CORS)**인 경우, 브라우저는 보안상 더 엄격하게 검증을 합니다.

 

 

2. 그에 따라 서버는 반드시 다음 헤더들을 명시해야 함

헤더	설명
Access-Control-Allow-Origin	* 사용 ❌, 반드시 정확한 도메인(origin) 명시 (예: https://yourdomain.com)
Access-Control-Allow-Credentials	반드시 true

 

 

3. 즉, 이 순서대로 연결됨:

클라이언트에서
withCredentials: true 설정
      ↓
브라우저가 쿠키 포함한 요청 보냄
      ↓
서버는 응답 시
Access-Control-Allow-Origin: 정확한 도메인
Access-Control-Allow-Credentials: true
를 **반드시 포함**해야 함
      ↓
브라우저가 CORS 통과시킴

 

 

💡 그래서 요약하면?

✅ 네, 맞습니다. withCredentials: true 때문에 서버는 반드시 Access-Control-Allow-Origin에 정확한 origin을 명시해야 합니다.

그렇지 않으면 브라우저가 CORS 정책 위반이라고 판단해서 **에러(Response to preflight request doesn’t pass access control check)**를 내게 됩니다.

 

 

---

 

❓ 질문 : 그렇다면 위에 게시글처럼 응답의 Access-Control-Allow-Credentials가 빈 값이다.('') 라는건 어떤 문제인건지?

▶️ 답변 :

"Access-Control-Allow-Credentials" 헤더가 '' (빈 문자열)이라는 건 서버 응답에 이 헤더가 빠졌거나, 비정상적으로 설정되었다는 뜻입니다.

 

🔥 즉, 이 에러는 다음과 같은 경우 발생합니다:

❌ 1. 서버가 Access-Control-Allow-Credentials 헤더를 아예 응답에 포함하지 않음

→ 그럼 브라우저는 예비 요청(preflight, OPTIONS)에 대해 CORS 정책 위반이라고 판단함

 

❌ 2. Access-Control-Allow-Credentials 헤더가 잘못된 값을 가짐 (예: 공백, "false" 등)

→ 이 헤더는 무조건 true 문자열이어야 함 (소문자도 안 됨)

 

 

✅ 해결책: 서버에서 다음을 반드시 설정하세요

Nginx 예시

add_header 'Access-Control-Allow-Origin' 'http://localhost:3000' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type, Accept, Origin' always;

- always를 붙이는 이유는: 오류 응답(4xx, 5xx)에도 CORS 헤더가 누락되지 않게 하기 위해서입니다.

 

 

🧪 확인 포인트 요약

항목	확인해야 할 것
응답 헤더에 Access-Control-Allow-Credentials 있음?	✅ 필수
값이 정확히 'true'로 되어 있음?	✅ 필수 (공백, false 등 ❌)
Access-Control-Allow-Origin에 * 말고 정확한 도메인?	✅ 필수
withCredentials: true 클라이언트에서 설정됨?	✅ 필요 시