Express 백엔드에서 CORS 및 Cookie-Parser를 사용하여 하위 도메인 쿠키를 수신하는 데 문제가 있습니다.
P粉665427988
P粉665427988 2023-08-14 21:31:57
0
1
488
<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>
P粉665427988
P粉665427988

모든 응답(1)
P粉244730625

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

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿