Express 백엔드에서 CORS 및 Cookie-Parser를 사용하여 하위 도메인 쿠키를 수신하는 데 문제가 있습니다.

Question

현재 MERN(MongoDB, Express, React, Node.js) 애플리케이션을 개발 중이며 Express 백엔드의 하위 도메인에서 쿠키를 수신하는 데 문제가 있습니다. CORS 및 쿠키 처리 설정이 있고 간단한 localhost 원본을 사용할 때 모든 것이 잘 작동하지만 하위 도메인을 처리하는 데 문제가 있습니다.

다음은 제가 취한 조치와 직면한 문제에 대한 요약입니다.

로그인 시 쿠키 설정:

res.cookie("token", token, {
    httpOnly: 사실,
    sameSite: "없음",
    길: "/",
    안전함: 사실,
  });

이 쿠키를 얻기 위해 cors 설정을 사용하려고 할 때 출처는 다음과 같습니다.

app.use(
  코르스({
    출처: "http://localhost:3000",
    자격 증명: 사실,
  })
);

그러나 테스트할 때 하위 도메인 원본을 사용하는 경우는 다음과 같습니다.

app.use(
  코르스({
    출처: "http://binbros.localhost:3000",
    자격 증명: 사실,
  })
);

프런트엔드에서 CORS에 오류가 없으며 쿠키가 프런트엔드에서 성공적으로 생성되었습니다. 하지만 이 CORS 설정을 사용하여 쿠키에 액세스하려고 하면 쿠키가 수신되지 않습니다. 그러나 간단한 로컬 호스트에 동일한 방법과 CORS 설정을 사용하면 문제 없이 모든 쿠키를 정상적으로 가져올 수 있습니다.

console.log(req.cookies);

P.S: 내가 localhost에 있고 Origin이 localhost일 때, 쿠키를 기록하고 백엔드에서 생성한 쿠키뿐만 아니라 모든 프런트엔드 쿠키를 얻을 수 있습니다. 하지만 하위 도메인의 오리진에 있을 때 백엔드에서 쿠키도 받지 못하는데, 내가 만든 것도 없고 프런트엔드에서 만든 것도 없습니다

Answer 1

subdomain.localhost와 같은 개발 환경에서 하위 도메인을 사용하는 경우 브라우저 보안 정책 제한으로 인해 추가 문제가 발생할 수 있습니다. 브라우저는 종종 서로 다른 하위 도메인을 독립적인 출처로 취급하는데, 이는 쿠키 및 CORS 동작에 영향을 미칠 수 있습니다.

개발 환경에서는 secure 속성을 false로 설정하는 것이 가장 좋습니다.

으아악

시스템을 확인하세요hosts파일:

으아악

프런트엔드에서 API가 binbros.localhost도메인 이름에서 호출되는지 확인하고 Access-Control-Allow-Credentials

를 확인하세요.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials