Nextjs, Nestjs 쿠키 값 전달시 CORS 오류 쿠키 response request 안됨.

Access to XMLHttpRequest at 'http://localhost:3001/users/signin' 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-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.

 

 

나같은 경우에 axios를 사용하는데, Nextjs에서 쿠키 전달을 하려면 

withCredentials : true 설정을 해줘야 된다고 했는데 위와 같은 오류가 뜬다. 그래서 Nextjs와 Nestjs에 둘다 Credential 설정을 해줘야됨.

//Nextjs
export const apiClient = axios.create({
    baseURL: "http://localhost:3001",
    withCredentials: true,
    headers: {
        'Content-type': 'application/json',
    },
    transformRequest:[
        (data) => {
            return JSON.stringify(data);
        },
    ],
    transformResponse: [
        (data) => {
            return JSON.parse(data);
        },
    ],
});

//Nestjs

async function bootstrap() {
  	const app = await NestFactory.create(AppModule);
      const options = {
        origin: true,
        methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
        preflightContinue: false,
        credentials: true,
        allowedHeaders: 'Content-Type, Accept',
      };
      app.enableCors(options);
      app.use(cookieParser());
      await app.listen(3001);
  }
  bootstrap();

withCredentials 옵션은 단어 그대로, 다른 도메인(Cross Origin)에 요청을 보낼 때 요청에 인증(credential) 정보를 담아서 보낼 지를 결정하는 항목이다.

즉, 쿠키나 인증 헤더 정보를 포함시켜 요청하고 싶다면, 클라이언트에서 API 요청 메소드를 보낼때 withCredentials 옵션을 true로 설정해야한다. 또한 인증된 요청을 정상적으로 수행하기 위해선 클라이언트 뿐만 아니라 서버에서도 Access-Control-Allow-Credentials 헤더를 true로 함으로써 인증 옵션을 설정해주어야 한다.

 

 

https://stackoverflow.com/questions/70044466/cors-error-in-nestjs-it-is-not-working-withcredentials