프론트에서 credentials: include로 설정한경우 co... - 인프런

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

강의소개

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

해결된 질문

작성

101

안녕하세요,

프론트(리액트)에서 프론트에서 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설정을하면 에러가나더라구요..

혹시 어떻게 하면 이 이슈를 헤쳐나갈수있을까요?..

javascript node.js docker rest-api nestjs

답변 2

노원두

지식공유자

안녕하세요! 반가우면반갑다고해님!

아마도, 백엔드와 프론트엔드를 직접 구현하여 둘의 연동을 시도하고 계신 것 같네요!

위에 올려주신 링크를 확인해 보면, 크게 2가지 버전에 의존하고 있기 때문에, 버전에 맞게 적용해 보세요!

// 구버전: main.ts 에서
app.enableCors({
    origin: "http://localhost:3000", // 요청을 보내는 클라이언트의 주소를 명시
    credentials: true,
});

// 신버전: app.module.ts 에서
GraphQLModule.forRoot({
    ...
    cors: {
        origin: "http://localhost:3000",
        credentials: true,
    },
})

둘 다 해보셨는데도 잘 안되신다면, 에러 메시지와 함께 답글 남겨 주세요!

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

님의 문제를 해결하기 위해 서버 측에서 CORS 설정을 조정하는 것이 중요합니다. credentials: ‘include’를 사용할 경우, 서버는 정확한 출처(origin)를 지정해야 하며, ‘*’ 와일드카드는 사용할 수 없습니다. 님께서 제공한 서버 코드는 이미 이 부분을 정확히 설정하신 것 같습니다. 하지만, 여전히 문제가 발생하는 경우 다음을 확인해 보세요.

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

이러한 점들을 체크하고 해당 사항을 조정함으로써 CORS 문제를 해결할 수 있을 것입니다.

인프런 커뮤니티 질문&답변

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