res.cookie 未在浏览器中设置 cookie

Question

我目前正在尝试使用 React 客户端设置 Node/Express 应用程序以与其交互。我设置了通行证来处理 JWT 的身份验证。当用户登录时，我验证电子邮件/密码。然后我设置cookie：

res.cookie('jwt', token, { httpOnly: true, secure: false });

我看到令牌在响应标头中被传回，但是当我在开发者工具 > 应用程序 > Cookies 下检查 Chrome 浏览器的 cookie 时，我看到一个空的 cookie。我做错了什么，如何在后续请求的响应头中发送 jwt？

服务器/App.js

const app = express()

app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());

app.use(cookieParser());

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

app.post('/login', (req, res) => {
  passport.authenticate('local', { session: false }, (error, user) => {
    if (error || !user) {
      res.status(400).json({ error });
    }

    // Construct JWT payload
    const payload = {
      email: user.email,
      expires: Date.now() + parseInt(process.env.JWT_EXPIRATION_MS),
    };

    // Assign payload to req.user
    req.login(payload, {session: false}, (error) => {
      if (error) {
        res.status(400).send({ error });
      }
      // Generate a signed JWT
      const token = jwt.sign(JSON.stringify(payload), process.env.JWT_SECRET);

      // Assign JWT to cookie
      res.cookie('jwt', token, { httpOnly: true, secure: false });
      res.status(200).send({ email: user.email });
    });
  })(req, res);
});

客户端/登录Modal.js

  handleLogin = async () => {
    const { name, email, password } = this.state

    try{
      const res = await axios.post('http://localhost:8080/login', {
        email: email,
        password: password,
      })

      if(res.status == 200){
        console.log("Logged in")
        console.log(res)
      }

    } catch (err) {
      console.log(err)
    }
  }

编辑：我目前的解决方法是将令牌作为有效负载的一部分发送。我的反应客户端然后从有效负载中获取令牌并将其存储在浏览器的 cookie 中。有没有办法避免这种解决方法（例如参见下文）？

服务器

 res.status(200).send({ email: user.email, jwt: token });

客户

  if(res.status == 200){
    cookies.set('jwt', res.data.jwt)
    cookies.set('email', res.data.email)
  }

Answer 1

在进行axis.post() 调用时，您必须将其{withCredentials: true, credentials: 'include'}作为第二个参数传递，只有这样您的浏览器才会设置cookie。

Answer 2

您已设置 cookie，并启用了 httpOnly 标志。大多数现代浏览器都通过开发人员工具限制对此类 cookie 的读取访问。您可以阅读更多相关内容在这里读更多关于它的内容。

如果您想在开发环境中查看 cookie 的内容，请将 httpOnly 设置为 false。