не могу получить токен в узле, используя JWT внутри файла cookie HttpOnly

#node.js #reactjs #express #cookies #jwt

Вопрос:

После долгих исследований я все еще не мог понять проблему. Так что, может быть, кто-нибудь из вас сможет помочь. Я разрабатываю приложение с использованием React и node(express) и пытаюсь использовать jwt для аутентификации

Вещи, которые вы должны знать:

1 — Мой API находится на локальном хосте:3000, приложение React работает на локальном хосте:3001
2 — Я сохраняю jwt в файле cookie HttpOnly и отправляю его на интерфейс

 //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 я установил прокси-сервер на адрес API в package.json:

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

я получаю эти заголовки ответов при входе в систему

 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 — и я хочу проверить jwt, когда пользователь пытается что-то опубликовать(сообщение в блоге)
запрос от 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();
      }
 

В качестве ответа на req из браузера я получаю это:

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

Мне кажется, что я упускаю что — то маленькое, но я не знаю. Это мой первый раз, когда я использую файлы cookie. Любая помощь будет оценена по достоинству.

Комментарии:

1. если вы консолируете объект req непосредственно перед кодом подтверждения, видите ли вы маркер в списке?

2. @proxim0 я попадаю cookies: [Object: null prototype] {} в req

Ответ №1:

Понял это. Моя ошибка заключалась в том, что, когда я отправлял запрос на вход с интерфейса, я не установил учетные данные для «включения» для выборки:

  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
        })
 

это маршрут, по которому я создаю свой токен, поэтому, поскольку в то время в браузере не было учетных данных, я не думал, что они мне понадобятся. по-видимому, это означает включать учетные данные в обоих направлениях 😀