애플리케이션 배포 후 세션 쿠키를 저장할 수 없는 문제
<p>저는 React를 사용하여 프런트엔드 애플리케이션을 만든 다음 이를 Netlify에 배포했습니다. 프런트엔드 애플리케이션은 제가 생성하여 Render에 배포한 Express 백엔드 애플리케이션과 상호작용합니다. 프런트엔드와 백엔드 간의 모든 상호 작용은 Passportjs를 사용한 인증으로 보호됩니다. 백엔드 애플리케이션은 여권의 로컬 정책을 사용하여 사용자가 존재하는지, mongoDB에 연결하여 사용자 이름과 비밀번호가 올바른지 확인합니다. 확인되면 여권의 직렬화 및 역직렬화 기능을 사용하여 로그인 세션을 유지합니다. </p>
<p>개발 중에는 http://localhost에서 이 애플리케이션을 사용합니다. 그동안 모든 것이 예상대로 작동합니다. 로그인 세션은 쿠키로 저장되며, 이를 향후 사용자 인증 요청의 일부로 백엔드 애플리케이션에 보낼 수 있습니다. </p>
<p>프런트엔드 앱을 Netlify에 배포하고 백엔드 앱을 Render에 배포하면 세션 쿠키가 더 이상 저장되지 않습니다. 이는 로그인 후 모든 요청이 저장된 세션 쿠키가 백엔드로 전송되기 때문에 사용자가 백엔드에서 인증할 수 없음을 의미합니다. . </p>
<p>좀 더 자세히 설명하자면, express-session을 Passport와 함께 사용하여 로그인 세션을 생성하기 위해 connect-mongo를 사용하여 MongoDB에 세션을 저장합니다. 프론트엔드를 통해 로그인할 때마다 세션이 생성되어 MongoDB에 저장되는 것을 볼 수 있습니다. 문제는 응답의 쿠키가 전달되지 않는 것 같은데 그 이유는 모르겠습니다. </p>
<p>내 Express 백엔드 애플리케이션의 현재 세션 옵션은 다음과 같습니다. </p>
<pre class="brush:php;toolbar:false;">app.use(
세션({
비밀: process.env.SESSION_SECRET,
저장: 거짓,
saveUninitialized: 거짓,
저장소: MongoStore.create({ mongoUrl: process.env.MONGODB_URI }),
쿠키: {
안전함: 사실,
sameSite: "없음",
httpOnly: 사실,
만료: 24 * 60*60*1000
}
})
);</pre>
<p>해결책 검색을 시도했고 <code>secure</code> 변경, <code>httpOnly</code> 변경, <code>sameSite</code> false 및 없음, 프런트엔드 URL을 가리키는 <code>domain</code> 및 백엔드 URL을 가리키는 다른 <code>domain</code>을 추가하고 헬멧 및 속도 제한기와 같이 설치한 보안 패키지를 제거합니다. 아무런 효과가 없는 것 같습니다.</p>
<p>또한 자격 증명의 액세스 제어 헤더를 true로 설정했습니다. </p>
<pre class="brush:php;toolbar:false;">app.use((req, res, next) => {
res.setHeader("Access-Control-Allow-Origin", process.env.DOMAIN_URL);
res.setHeader("Access-Control-Allow-Credentials", true);
res.setHeader("Access-Control-Allow-Headers", "Content-Type");
res.header("접근 제어 허용 방법", "GET, PUT, POST, DELETE");
다음();
});</pre>
<p>모든 요청에 대해 <code>fetch</code>를 사용합니다. 나와 비슷한 질문이 있었지만 답변을 받지 못했습니다. 브라우저가 크로스 도메인 서버의 세션 쿠키를 저장하지 않습니다</p>
<p>어떤 도움이나 조언이라도 주시면 감사하겠습니다! </p>
