【问题标题】:res.cookie not setting cookie in browserres.cookie 没有在浏览器中设置 cookie
【发布时间】:2019-05-16 04:47:15
【问题描述】:

我目前正在尝试设置一个带有 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);
});

client/LoginModal.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)
  }

【问题讨论】:

    标签: node.js reactjs express cookies jwt


    【解决方案1】:

    当调用axis.post()时,你必须传递{withCredentials: true, credentials: 'include'}作为你的第二个参数,只有这样你的浏览器才会设置cookies。

    【讨论】:

    • app.use(cors({ origin: true, credentials: true })); 在快递应用中也是如此
    【解决方案2】:

    您设置了启用了 httpOnly 标志的 cookie。大多数现代浏览器通过开发人员工具限制对此类 cookie 的读取访问。你可以阅读更多关于它的信息here

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

    【讨论】:

      猜你喜欢
      • 2020-02-27
      • 2020-08-24
      • 2017-12-17
      • 2019-03-13
      • 2019-09-07
      • 2021-02-14
      • 2021-11-30
      • 2014-05-07
      • 1970-01-01
      相关资源
      最近更新 更多