프론트에서 credentials: include로 설정한경우 cors 문제

Question

안녕하세요, 프론트(리액트)에서 프론트에서 credentials: include로 설정한경우 cors 문제가 발생하고있습니다.     이런 에러가 발생하고있는데요, 프론트측에서 해줘야하는 설정과 서버에서 해줘야하는 설정은 맞게해준것 같습니다.   먼저 프론트에서 해줘야하는 쿠키설정은 const httpLink = createHttpLink({ uri: 'http://localhost:3001/graphql', credentials: 'include', }); 이렇게 해줬습니다.   그리고 서버쪽에서는   onst app = await NestFactory.create(AppModule, { cors: true }); app.enableCors({ origin: 'http://localhost:3000', credentials: true, exposedHeaders: ['Authorization'], // * 사용할 헤더 추가. }); 이렇게 해주었는데요.. 이렇게해주고나서 로그인하면 맨위의 사진처럼 에러가납니다..   버전은"@apollo/server": "^4.10.4", "@nestjs/apollo": "^12.2.0", 이렇게되어있는데..   https://www.inflearn.com/community/questions/896182/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%90%EC%84%9C-credentials-include%EB%A1%9C-%EC%84%A4%EC%A0%95%ED%95%9C%EA%B2%BD%EC%9A%B0-cors-%EB%AC%B8%EC%A0%9C 이분이 해결하신거를 참고해봤는데, 저분이 app.module설정을 통해 해결하셨지만, 저는 버전이달라서그런가 거기에 cors설정을하면 에러가나더라구요..   혹시 어떻게 하면 이 이슈를 헤쳐나갈수있을까요?..

노원두 · Answer

안녕하세요! 반가우면반갑다고해 님! 아마도, 백엔드와 프론트엔드를 직접 구현하여 둘의 연동을 시도하고 계신 것 같네요! 위에 올려주신 링크를 확인해 보면, 크게 2가지 버전에 의존 하고 있기 때문에, 버전에 맞게 적용해 보세요! // 구버전: main.ts 에서 app.enableCors({ origin: "http://localhost:3000", // 요청을 보내는 클라이언트의 주소를 명시 credentials: true, }); // 신버전: app.module.ts 에서 GraphQLModule.forRoot({ ... cors: { origin: "http://localhost:3000", credentials: true, }, }) 둘 다 해보셨는데도 잘 안되신다면, 에러 메시지와 함께 답글 남겨 주세요!

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 님의 문제를 해결하기 위해 서버 측에서 CORS 설정을 조정하는 것이 중요합니다. credentials: &lsquo;include&rsquo;를 사용할 경우, 서버는 정확한 출처(origin)를 지정해야 하며, &lsquo;*&rsquo; 와일드카드는 사용할 수 없습니다. 님께서 제공한 서버 코드는 이미 이 부분을 정확히 설정하신 것 같습니다. 하지만, 여전히 문제가 발생하는 경우 다음을 확인해 보세요. 서버와 클라이언트가 올바른 URL( http://localhost:3000 에서 http://localhost:3001 으로)을 통해 통신하고 있는지 확인해 보세요. 가끔 도메인, 포트, 프로토콜에 오타가 생기거나, 일치하지 않는 경우가 있습니다. 네트워크 요청 시 credentials: 'include' 가 정확히 구현되었는지, 그리고 서버측 CORS 설정에서 credentials: true 가 명시적으로 설정되어 있는지 다시 한번 확인하세요. 서버 재시작 등의 단계를 거쳐 설정 변경 사항이 제대로 적용되었는지 확인하세요. 때때로 변경 사항이 실시간으로 반영되지 않아, 서버를 다시 시작해야 할 수 있습니다. 버전 호환성 문제로 발생할 수 있는 문제를 해결하기 위해, 사용하고 계신 NestJS, Apollo Server 등의 문서를 참고하여 최신 버전과의 호환성을 확인하세요. 가끔 버전이 업데이트 되며 설정 방법에 변화가 생길 수 있습니다. 만약 위의 모든 방법을 시도했음에도 불구하고 해결되지 않는다면, 문제의 원인을 좀 더 구체적으로 파악하기 위해 네트워크 요청과 응답 헤더를 검사해 보세요. 개발자 도구의 네트워크 탭에서 해당 요청을 찾아 응답 헤더에 Access-Control-Allow-Origin 이 올바르게 설정되어 있는지 확인하세요. 이러한 점들을 체크하고 해당 사항을 조정함으로써 CORS 문제를 해결할 수 있을 것입니다.