다른 관련 게시물도 살펴봤지만 그 중 아무 것도 제게 효과가 없었습니다. 클라이언트 측에서는 vue를 사용하고 서버 측에서는 노드를 사용합니다.
cors 라이브러리를 사용하여 다른 게시물에서 제안한 접근 방식을 시도했지만 성공하지 못했습니다. 다음 코드를 사용하면 클라이언트의 localhost:8080에서 서버의 localhost:3000으로 요청을 보낼 수 있다고 생각할 수도 있지만 모든 요청이 실패합니다.
const cors = require("cors"); if (process.env.ENV !== "prod") { corsOptions = {를 허용하십시오. 출처: ["http://localhost:8080"], 자격 증명: 사실, 옵션성공상태: 200, }; app.use(cors(corsOptions)); }
이것은 제가 쿠키를 설정하는 데 사용하는 컨트롤러입니다.
router.route("/login").post(async (req, res) => { //사용자 인증 const user = wait Users.findOne({ 여기서: { 이메일: req.body.email } }); if (사용자 == null) { return res.status(400).send("사용자를 찾을 수 없습니다!"); } 노력하다 { if (bcrypt.compare(req.body.password, user.password)를 기다립니다)) { const userInfo = { 사용자 이름: 사용자.사용자 이름, 이메일: 사용자.이메일, 연령: 사용자.나이, }; const accessToken = generateAccessToken(userInfo); const RefreshToken = jwt.sign(userInfo, process.env.REFRESH_TOKEN_SECRET); res.cookie("token", accessToken, { 최대 연령: 300000, 안전함: 사실, httpOnly: 사실, sameSite: "없음", }); res.status(200).send("로그인 성공!"); } 또 다른 { res.send("이메일 또는 비밀번호가 틀렸습니다!"); } } 잡다 { res.status(500).send(); } });
기본적으로 이 사이트의 모든 답변은 app.use(cors)로 돌아가지만 어떤 이유로든 저에게는 작동하지 않습니다.
교차 도메인 쿠키의 경우 {sameSite: true} 및 {secure: true}를 설정했기 때문일 수 있지만, 귀하의 예에서는 http://localhost에서 수행하므로 쿠키가 설정되지 않습니다. 요구사항은 아래 링크를 참고해주세요.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite#samesitenone_requires_secure
또한 Access-Control-Allow-Credentials, Access-Control-Allow-Origin, Access-Control-Allow-Headers와 같은 올바른 헤더를 설정하세요
mkcert를 사용하여 localhost에서 보안 연결을 만드는 방법을 참조할 수 있습니다.
또한 프런트엔드와 백엔드 모두에서 동일한 최상위 도메인을 사용하고 하위 도메인을 사용하는 것이 좋습니다.
여기서 한 가지 더 주의할 점은 도메인 이름에 포트가 있으면 Chrome에서 쿠키를 설정하지 않을 것 같으니 한번 시도해 보세요.
나중에 오시는 분들도 답을 찾으실 수 있도록 이 문제를 성공적으로 해결했습니다. Sequelize 연결이 초기화되는 직전으로 Cookieparser 선언을 옮겼습니다. 또한 내 axios 게시물 요청에 withCredentials 옵션을 추가했습니다. 두 단계를 모두 수행하면 이제 쿠키가 올바르게 설정되고 액세스 가능해졌습니다.
으아악 으아악