Express 백엔드에서 CORS 및 Cookie-Parser를 사용하여 하위 도메인 쿠키를 수신하는 데 문제가 있습니다.
P粉665427988
2023-08-14 21:31:57
<p>현재 MERN(MongoDB, Express, React, Node.js) 애플리케이션을 개발 중이며 Express 백엔드의 하위 도메인에서 쿠키를 수신하는 데 문제가 있습니다. CORS 및 쿠키 처리 설정이 있고 간단한 localhost 원본을 사용할 때 모든 것이 잘 작동하지만 하위 도메인을 처리하는 데 문제가 있습니다. </p>
<p>다음은 제가 취한 조치와 직면한 문제에 대한 요약입니다. </p>
<p><strong>로그인 시 쿠키 설정: </strong></p>
<pre class="brush:php;toolbar:false;">res.cookie("token", token, {
httpOnly: 사실,
sameSite: "없음",
길: "/",
안전함: 사실,
});</pre>
<p>이 쿠키를 얻기 위해 cors 설정을 사용하려고 할 때 출처는 다음과 같습니다.</p>
<pre class="brush:php;toolbar:false;">app.use(
코르스({
출처: "http://localhost:3000",
자격 증명: 사실,
})
);</pre>
<p>그러나 테스트할 때 하위 도메인 원본을 사용하는 경우는 다음과 같습니다. </p>
<pre class="brush:php;toolbar:false;">app.use(
코르스({
출처: "http://binbros.localhost:3000",
자격 증명: 사실,
})
);</pre>
<p>프런트엔드에서 CORS에 오류가 없으며 쿠키가 프런트엔드에서 성공적으로 생성되었습니다. 하지만 이 CORS 설정을 사용하여 쿠키에 액세스하려고 하면 쿠키가 수신되지 않습니다. 그러나 간단한 로컬 호스트에 동일한 방법과 CORS 설정을 사용하면 문제 없이 모든 쿠키를 정상적으로 가져올 수 있습니다. </p>
<p><code>console.log(req.cookies);</code></p>
<p>P.S:
내가 localhost에 있고 Origin이 localhost일 때,
쿠키를 기록하고
백엔드에서 생성한 쿠키뿐만 아니라 모든 프런트엔드 쿠키를 얻을 수 있습니다.
하지만
하위 도메인의 오리진에 있을 때 백엔드에서 쿠키도 받지 못하는데,
내가 만든 것도 없고 프런트엔드에서 만든 것도 없습니다</p>
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