无法使用 httpOnly cookie 中的 JWT 在节点中接收令牌

Question

经过大量研究，我仍然无法找出问题所在。所以也许你们中的一些人可以提供帮助。我正在使用 React 和 node(express) 开发应用程序并尝试使用 jwt 进行身份验证

你应该知道的事情：

1- 我的 API 在 localhost:3000 上，React 应用运行在 localhost:3001
上 2- 我将 jwt 存储在 httpOnly cookie 中并将其发送到前端

//express api
const app = express()
app.use(express.json());
app.use(cookieParser());
app.use(cors({
    origin: 'http://localhost:3001',
    credentials: true
}));  

//in login route
db.get('users').findOne({email: email})
            .then(user => {
              const token = jsonwebtoken.sign({id: user._id}, 'privateKey', { expiresIn: 300});
              res.cookie('token', token, { httpOnly: true });
              res.json({user: user})

3- 在 React 中，我已将代理设置为 package.json 中的 API 地址：

//package.json
 "proxy": "http://localhost:3000"

我在登录时收到此响应 headers

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:3001
Connection: keep-alive
Content-Length: 185
Content-Type: application/json; charset=utf-8
Date: Thu, 05 Aug 2021 21:10:51 GMT
ETag: W/"b9-zncj/54sydwZElLyuciFm6QMQEQ"
Keep-Alive: timeout=5
Set-Cookie: token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYwMzQwM2IyMzJiYjVhMDNjODE1ZWQ3MyIsImlhdCI6MTYyODE5Nzg1MSwiZXhwIjoxNjI4MTk4MTUxfQ.8SJ3u9HWFdPyJctxGGToNPu52OPkmYMd_kGIRbUKOdQ; Path=/; HttpOnly
Vary: Origin
X-Powered-By: Express

4- 我想在用户尝试 post 某事时检查 jwt（博客 post）
来自 REact 的请求如下所示：

fetch("/post", {
            method: "post",
            headers: {"Content-Type": "application/json"},
            body: JSON.stringify({userId: userId, username:username, title: title, body: body, tags: tags }),
            credentials: 'include'
        })

5- 我会像这样在后端检查它：


const jsonwebtoken = require('jsonwebtoken');

jsonwebtoken.verify(req.cookies.token, 'privateKey', function(err, decoded) {
      if(err){
        res.json(err)
      }else{
        next();
      }

作为对来自浏览器的请求的响应，我得到了这个：

{"name":"JsonWebTokenError","message":"jwt must be provided"}

我觉得我错过了一些小东西，但我不知道。这是我第一次使用 cookie。任何帮助将不胜感激。

Answer 1

想通了。我的错误是当我从前端发送登录请求时，我没有将凭据设置为 'include' 以获取：

 fetch("http://localhost:3000/login", {
            method: "post",
            headers: {"Content-Type": "application/json"},
            body: JSON.stringify({email: email, password: password}),
            credentials: 'include' //this part was missing
        })

这是我创建令牌的路径，因为当时浏览器中没有凭据，我认为我不需要它。显然这意味着包括两种方式的凭据：D

无法使用 httpOnly cookie 中的 JWT 在节点中接收令牌

cant receive the token in node using JWT inside httpOnly cookie

cookies

node.js

express

jwt

reactjs

你应该知道的事情：