주로 다음과 같은 상황에서 withCredentials: true 가 사용된다

1. 사용자가 로그인한 후에 다른 도메인의 API로 요청을 보내야 할 때
2. 클라이언트 애플리케이션이 다른 도메인에 위치한 서버의 API를 호출하고, 해당 API가 CORS를 허용하고 인증이 필요한 경우
3. 클라이언트 애플리케이션이 사용자의 세션을 유지하고 서버로 인증된 요청을 보내야 할 때

이러한 상황에서 withCredentials 옵션을 설정하면 브라우저가 CORS 요청에 인증 정보를 포함시켜서 서버가 사용자를 인증하고 요청을 처리할 수 있게 된다.

이때 서버에서도 응답 헤더의 Access-Control-Allow-Credentials 항목을 true로 설정해주어야 한다.

express 서버에 이렇게 설정해주면 된다.

app.use(
  cors({
    origin: "http://localhost:3095", // 클라이언트 도메인
    credentials: true,
  })
);

cf. 추가적으로 응답 헤더를 설정하는 데 제약이 있다.

1. 응답 헤더의 Access-Control-Allow-Origin의 값에 와일드카드 문자("*")는 보안상 사용할 수 없다.
2. 응답 헤더의 Access-Control-Allow-Methods의 값에 와일드카드 문자("*")는 보안상 사용할 수 없다.
3. 응답 헤더의 Access-Control-Allow-Headers의 값에 와일드카드 문자("*")는 보안상 사용할 수 없다.

배포 시에 프론트엔드 애플리케이션과 백엔드 서버가 동일한 도메인 또는 도메인과 포트를 공유하는 경우, withCredentials 옵션이 필요 없으므로 지워주자!

cf. 이 외의 proxy 설정 방법

Create React App - package.json에 설정

// package.json
"proxy": "http://localhost:3095",
  "scripts": { ...

Create React App - 프록시 미들웨어를 작성

// setupProxy.js
const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    "/api",
    createProxyMiddleware({
      target: "http://localhost:3095",
      changeOrigin: true,
    })
  );
};

webpack-dev-server 사용시

// webpack.config.js
module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:3095",
        changeOrigin: true,
      },
    },
  },
};

참고로 이 3가지 방법을 사용하면 withCredentials 옵션 설정을 안해줘도 된다.