클라이언트 설정 코드
axios.defaults.withCredentials = true;위와 같이 클라이언트쪽에서 axios 설정이 되어있어도 서버쪽에서 모든 도메인에 대해 cors를 허용해준다고 하여도 Cors오류가 발생하는 이슈가 발생했다.
Credentials이란?
Credentials 이란 쿠키, Authorization 인증 헤더, TLS client certificates(증명서)를 내포하는 자격 인증 정보를 말한다.
본적으로 브라우저가 제공하는 요청 API 들은 별도의 옵션 없이 브라우저의 쿠키와 같은 인증과 관련된 데이터를 함부로 요청 데이터에 담지 않도록 되어있다.
이는 응답을 받을때도 마찬가지이다. 따라서 요청과 응답에 쿠키를 허용하고 싶을 경우, 이를 해결하기 위한 옵션이 바로 withCredentials 옵션이다
출처: https://inpa.tistory.com/entry/AXIOS-📚-CORS-쿠키-전송withCredentials-옵션 [Inpa Dev 👨💻:티스토리]
그렇다면 왜 안될까?
표준 CORS요청은 기본적으로 쿠키를 설정하거나 보낼 수 없다.
때문에 클라이언트와 서버에서 쿠키를 주고 받기 위해서는 두쪽 다 아래 설정은 true로 해줘야한다.
클라이언트(리액트[axios])
axios.defaults.withCredentials = true;서버(nodejs[nest])
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
async function bootstrap() {
const app = await NestFactory.create(AppModule);
app.enableCors({
origin: true,
credentials: true,
});
await app.listen(3000);
}
bootstrap();만약 서버에서 credentials값이 false로 되어있다면 클라이언트쪽에서
axios.defaults.withCredentials = true;
로 코드를 설정했다해다 오류가 발생할 것이다.
따라서
- 클라이언트와 서버 도메인이 다르고
- 쿠키를 주고 받아야하는 상황이라면
클라이언트와 서버쪽에서 위 코드를 각각 설정해주도록 하자.
FE DEVELOPER