Portfolio

1. 쿠키 설정 문제 BACKEND 🧨 문제점 해결편 FRONTEND credentials 옵션 2. CORS 문제 BACKEND 들어가기 앞서.. 저희는 기본적으로 테스트 준비물 끗.

1. 쿠키 설정 문제

BACKEND

🧨 문제점

기존의 코드로 반환된 쿠키의 설정을 보면,

HttpOnly

Secure

MaxAge

설정들이 하나도 적용이 되지 않은 상태로 쿠키가 발급된것을 확인할 수 있었습니다.

저희는 이전 프로젝트에서 그냥 쿠키를 사용하고 있었던 것이죠. 🫠

그래서 AuthController에서 로그인 메서드를 확인해보니

아무런 설정없이 쿠키가 만들어지고

그대로 반환 되는 것을 확인할 수 있었습니다.

해결편

이제 쿠키를 생성할 때 위와 같이 속성들을 설정해줘야 합니다.

이제 다시 로그인을 해보면?

해당 속성들이 올바르게 설정된 것을 확인할 수 있습니다.

FRONTEND

이제 프론트에서는 fetch를 사용할 때는 credentials 옵션을 주셔야 합니다.

credentials 옵션 없이 로그인 요청

응답값은 받았지만… 쿠키가 없는 것을 확인할 수 있습니다.

credentials 옵션 추가 후 로그인 요청

응답값과 함께 쿠키가 생성된것을 확인할 수 있습니다.

credentials 옵션

Access-Control-Allow-Credentials - HTTP | MDN

응답헤더 Access-Control-Allow-Credentials 는 요청의 자격증명 모드(Request.credentials )가 " include" 일때, 브라우저들이 응답을 프로트엔드 자바스트립트 코드에 노출할지에 대해 알려줍니다. 요청의 자격증명 모드가 (Request.credentials )가 " include" 일 때, Access-Control-Allow-Credentials 값이 true 일 경우에만 브라우저들은 프로트엔드 자바스트립트에 응답을 노출 할 것입니다. 자격증명들은 쿠키, authorization 헤더들 또는 TLS 클라이언트 인증서입니다.

https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials

Request.credentials - Web API | MDN

인터페이스의 credentials 읽기 전용 속성은 cross-origin 요청의 경우, user agent가 다른 도메인으로부터 cookie 들을 전달해야만 하는가 아닌가를 나타낸다. 이것은 XHR 의 withCredentials flag 과 비슷하지만, (2개가 아니라) 3가지 값이 사용 가능하다 : omit: 절대로 cookie 들을 전송하거나 받지 않는다. same-origin: URL이 호출 script 와 동일 출처(same origin)에 있다면, user credentials (cookies, basic http auth 등..)을 전송한다.

https://developer.mozilla.org/ko/docs/Web/API/Request/credentials

클라이언트가 서버로 요청할 때, 어떤 경우에 이 쿠키 정보를 포함해서 보낼건지 설정할 수 있는 옵션이 바로 credentials 입니다.

credentials에는 총 3가지 옵션이 있는데요.

ommit : 어떤 경우에도(Never) 쿠키 정보를 포함하지 않음

default same-origin : 도메인이 동일한 경우에만 (same-origin) 쿠키를 자동으로 포함

include : 다른 도메인 이라도 (cross-origin) 쿠키를 포함

2. CORS 문제

BACKEND

쿠키 문제는 해결 되었지만, 아직 CORS 문제가 남아 있습니다. 가즈아!

들어가기 앞서.. 저희는 기본적으로

저희는 자격 증명(인증)을 CORS가 아닌 Spring Security의 토큰으로 하고 있기 때문에, CORS 설정에서는 허가할 도메인(origin) 설정만하고 나머지는 모두 허용으로 해야합니다.

테스트 준비물

로그인 API의 경우에는 Ignore설정이 되어 있기 때문에, 임의로 조회 버튼을 생성하고, 개인 프로필 조회 API 기능을 추가했습니다.

조회 버튼을 클릭했을 때, CORS 오류가 발생하는 것을 확인할 수 있습니다. (모두 허용으로 설정했음에도 불구하고 말이죠. 🫠)

오류 내용은 다음과 같습니다.


Access to fetch at 'http://localhost:8080/api/users/1' 
from 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-Credentials' header 
in the response is '' which must be 'true' when the request's credentials mode is 'include'.

위의 내용은 Access-Control-Allow-Credentials 헤더는 요청 시 자격증명이 필요하다고 합니다.

그래서 위와 같이 allowCredentials 옵션을 추가하면 해결 됩니다.

라고 말하면서 해결 될 줄 알았는데…?


Access to fetch at 'http://localhost:8080/api/users/signin' 
from origin 'http://localhost:3000' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: 
It does not have HTTP ok status.

preflight 오류가 발생하는 것을 확인할 수 있습니다.

이는 cross-origin 요청을 하기 전에, preflight를 통해서 해당 도메인이 어떤 메서드를 허용하는지를 확인하게 되는데… 이때 사용되는 메서드가 Options 입니다.

그래서 Security에서는 해당 메서드를 허용해주셔야 합니다.

이제는 정말로다가 Security에서 인증 결과를 반환 합니다.

로그인을 한 상태라면?

로그인을 하지 않은 상태라면?

드디어.. CORS 오류 없이 값을 받아올 수 있습니다.

로그인 API 2가지 문제점 (Cookie, CORS)

1. 쿠키 설정 문제

BACKEND

🧨 문제점

해결편

FRONTEND

credentials 옵션

2. CORS 문제

BACKEND

들어가기 앞서.. 저희는 기본적으로

테스트 준비물

끗.