首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >res.cookie没有在chrome浏览器中设置cookie

res.cookie没有在chrome浏览器中设置cookie
EN

Stack Overflow用户
提问于 2022-07-14 10:02:44
回答 1查看 449关注 0票数 0

在开发中,我有一个运行在localhost (http://127.0.0.1:5500/index.html)上的简单登录页面和一个运行在http://localhost:3003上的最小快速服务器。

我可以看到服务器正在显示我的access_token被发送到响应头中,但是chrome浏览器没有设置它。

应用程序面板不显示正在设置的任何cookie。

这是我的服务器:

代码语言:javascript
运行
复制
const express = require("express");

const cors = require("cors");

const JWT = require("jsonwebtoken");
const cookieParser = require("cookie-parser");

const { json } = require("express");

const users = require("../users.json");

const SECRET = "1234";

const app = express();

app.use(
  cors({
    origin: "http://127.0.0.1:5500",
    credentials: true,
  })
);

app.use(express.json());
app.use(cookieParser());



app.post("/auth/login", (req, res) => {
  const { email, password } = req.body;

  // add pseudo validation
  if (email !== "********" && password !== "asdfasdf") {
    res.status(403);
    throw new Error("Bad user credentials");
  }

  const token = JWT.sign({ email }, SECRET);
  // console.log("token values:", token);

  res.cookie("access_token", token, {
    maxAge: 3600,
    httpOnly: false,
    secure: false,
    sameSite: "lax",
  });

  res.status(200).json({
    foo: "bar",
  });
});

在前面,我使用了fetch:

代码语言:javascript
运行
复制
const loginForm = document.querySelector("#loginForm");

loginForm.addEventListener("submit", login);

function login(evt) {
  evt.preventDefault();
  const email = evt.target.email.value;
  const password = evt.target.psw.value;
  evt.target.reset();

  var headers = new Headers();
  headers.append("Content-Type", "application/json");
  headers.append("Accept", "application/json");

  return fetch("http://localhost:3003/auth/login", {
    method: "POST",
    mode: "cors",
    credentials: "include", // Don't forget to specify this if you need cookies
    headers: headers,
    body: JSON.stringify({ email, password }),
  }).then(
    (res) => {
      console.log(res);
    },
    (err) => {
      console.log(err);
    }
  );
}

我尝试过针对同一问题发布的多个解决方案:

在frontend

  • Setting httpOnly上添加mode: "cors"credentials: "include"false,在服务器上添加securefalse,并在服务器上添加sameSite: "lax"以通过新的samesite chrome浏览器restrictions

但还是什么都没用!我做错什么了?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-07-14 10:23:40

天哪!!localhost !==

我不得不把接电话改为:

代码语言:javascript
运行
复制
return fetch("http://http://127.0.0.1::3003/auth/login", { //<== this is the main change
    method: "POST",
    mode: "cors",
    credentials: "include", // Don't forget to specify this if you need cookies
    headers: headers,
    body: JSON.stringify({ email, password }),
  }).then(
    (res) => {
      console.log(res);
    },
    (err) => {
      console.log(err);
    }
  );

饼干准备好了。特别感谢https://github.com/axios/axios/issues/1553#issuecomment-477761247

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/72978720

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档