JWT：未直接访问服务器（localhost:3001/login）时未设置 Cookie（MERN）

Posted 2023-02-16

【中文标题】JWT：未直接访问服务器（localhost:3001/login）时未设置 Cookie（MERN）

【英文标题】：JWT: Cookies not being set when server (localhost:3001/login) is not accessed directly (MERN)

【发布时间】：2022-01-17 00:21:40

【问题描述】：

所以我正在尝试创建一个用于身份验证的令牌。

场景 1： 当我直接访问本地服务器 localhost:3001/login 时，我能够更新/设置 cookie。这是我的代码的 sn-p：

app.get('/login', async (req, res) => 
  const run_query = (username, password) => 
    UserModel.findOne( username:username , (e, obj) => 
      if(obj === null)
        res.send('no user')

      else if(e)
        res.send(obj)

      else 
        bcrypt.compare(password, obj.password, function(e, resp) 
          if(resp) 
            const accessToken = createTokens(obj)

            res.cookie(`access-token`, accessToken);
            res.send(obj)
          
          else
            res.send('wrong password')
        )
      
    )
  
  run_query(req.body.username, req.body.password)
)

场景 2： 当我尝试通过 axios.get 访问 localhost:3001/login 按钮单击（反应）时，我能够成功运行我的查询并发送用户的 obj 数据，但它没有设置饼干。

这是我通过 React 访问 /login 的方式：

  const login = async () => 
    try 

      const res = await axios.get('http://localhost:3001/login', 
        username: username,
        password: password
      )

      const loginTrue = (res) => 
        setLogged(true)
        console.log(res)
      

      res.data === 'wrong password' ? alert('Wrong Password')
        : res.data === 'no user' ? alert('Username not Found')
        : res.data === 'empty' ? alert('Please Fill up all fields')
        : res.data._id !== undefined && res.data._id !== '' ? loginTrue(res.data)
        : alert('Error: ' + res.data.Error)

     catch (e) 
      console.log(e)
    
  

问题：

为什么我只能在直接访问 localhost:3001/login 时更新我的​​ cookie？

我一定是错过了什么或做错了什么。谢谢！

【参考方案1】：

this thread 关于 cookie 本身如何工作以及 Axios 如何处理它们。根据您的环境，有几件事可能会起作用，所以我不会重复。

【讨论】：

嗨，感谢这个帖子。我可以通过在客户端添加 withCredentials: true 并将我的 CORS 配置为 app.use(cors(credentials: true, origin: 'localhost:3000'));

来解决我的问题