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

안녕하세요.

프론트와 백엔드 통신 중에 문제가 있어 질문드립니다.

restoreAcessToken 기능을 사용하기 위해서 쿠키를 사용해야 합니다.
서버측과 프론트측 주소가 다른 경우 쿠키 정보를 전송하기 위해서는

credentials: 'include'로 설정해야 하잖아요?

그러면 브라우저에 다음과 같은 오류가 발생합니다.
Access to fetch at 'http://localhost:3000/graphql' from origin 'http://localhost:8080' has been blocked by CORS policy: 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'.

프론트 주소: localhost:8080

백엔드 주소: localhost:3000

서버측에서 cors 문제를 해결하기 위해 사용한 코드는 아래와 같습니다.

app.enableCors({
        origin: "http://localhost:8080", // 요청을 보내는 클라이언트의 주소를 명시
        credentials: true,
    });

오류 해결을 위해서 어떻게 해야하는 걸까요? 

그리고 새 토큰을 발급 받는 아래 setRefreshToken의 코드도 수정돼야 하는지요? network 탭에서는 쿠키가 들어온게 확인이 되는데 application 탭에서는 확인이 됐다 안됐다 합니다..

setRefreshToken({ user, res }: IAuthServiceSetRefreshToken): void {
        const refreshToken = this.jwtService.sign({ email: user.email, sub: user.userId }, { secret: process.env.JWT_REFRESH_KEY, expiresIn: "2w" });

        res.setHeader("Set-Cookie", `refreshToken=${refreshToken}; path=/;`);
    }

답변 부탁드립니다.

감사합니다.