Set-Cookie из удаленного API не работает

#javascript #http #express #cookies

#javascript #http #экспресс #файлы cookie

Вопрос:

В настоящее время я работаю над проектом, в котором необходимо использовать файл cookie HttpOnly. Проекту требуется прямой вызов API.

Допустим, это xxx.com/vx/auth/login то, что проверяет подлинность попытки входа пользователя в систему. Эта конечная точка выдаст ответ, а также установит cookie для клиента. Что-то вроде этого:

Set-Cookie:token=eyJ0b2tlbiI6ImV5SmhiR2NpT2lKSVV6STFOaUlzSW5SNWNDSTZJa3BYVkNKOS5leUoxYVdRaU9pSXhNREEwT0RJd05DSXNJbDlwWkNaNkluWXhYM1Z6WlhKekx6RXdNRFE0TWpBMElpd2libUZ0WlNJNklrRm5kVzVuSUZOMWNubGhJRUpoYm1kellTSXNJbVZ0WVdsc0lqb2ljR0ZwYm1GdVpHVnpkR2x1WldSQWVXRm9iMjh1WTI5ddlpd2liR1YyWld3aU9qQXNJbWxoZENJNk1UUTNOek0zTVRnMk55d2laWGh3SWpveE5EYzNOVFEwTmpZc2ZRLmtUN0IzNW9YYjQ2RmU3WWFLYkd4MXhoYkdGUWJ1TFg1U053N3FWSjNfa2siffQ==; expires=Thu, 27 Oct 2016 05:04:27 GMT; path=/; HttpOnly

Но когда я смотрю на devtools , cookie не установлен. Даже после того, как я обновил несколько раз.

Чего мне здесь не хватает? Нужно ли мне создавать прокси для обработки этого? * Раньше я использовал прокси, и он работает хорошо

1. Браузеры иногда этого не показывают. Отправляется ли он обратно со следующим ответом?

2. Да, это так. Как упоминалось в вопросе, одним из заголовков ответа является «set-cookie».

3. итак, в чем ваш вопрос? если он отправлен обратно, он работает

4. В моем случае cookie вообще не установлен, хотя в ответе есть заголовок set-cookie. Чего мне здесь не хватает?

5. когда вы отправляете запрос на сервер после запроса с помощью set-cookie , что находится внутри cookie: заголовка?

Ответ №1:

Наконец-то мне удалось решить эту проблему, согласовав действия с бэкэнд-инженером:

Удалите подстановочный знак из Access-Control-Allow-Origin и используйте вместо него определенный домен origin. Если нет,
Установить Access-Control-Allow-Credentials: true

И в запросе я установил withCredentials значение true .

ПРИМЕЧАНИЕ: Если вы установили withCredentials значение true , вам также необходимо установить Access-Control-Allow-Credentials значение true . Кроме того, это не сработает, если вы все еще используете подстановочный знак в своем Access-Control-Allow-Origin .

Дальнейшее чтение о «Запросе с учетными данными»

Ответ №2:

В настоящее время я сделал что-то вроде этого.

 //API REST ROUTE
app.get('/login', function(req, res){ 
    console.log('login route', process.env.NODE_ENV);
    const token = '*/*--=3432432$%^%$'
    
    res.set('Access-Control-Allow-Origin', req.headers.origin); //req.headers.origin
    res.set('Access-Control-Allow-Credentials', 'true');
    // access-control-expose-headers allows JS in the browser to see headers other than the default 7
    res.set(
        'Access-Control-Expose-Headers',
        'date, etag, access-control-allow-origin, access-control-allow-credentials'
    );
    
    res
        .cookie('rest-auth-cookie', token, {
            httpOnly: true,
            // secure: process.env.NODE_ENV !== 'development',
            sameSite: 'strict',
            // maxAge: 100,
            path: '/'
          })
        .status(200)
        .json({message: 'success'})
});

 // Client Page
const loginAction = function() {
        let req = new Request(REMOTE_LOGIN_URL, {
          mode: 'cors', //just a safe-guard indicating our intentions of what to allow
          credentials: 'include', //when will the cookies and authorization header be sent
        });
    const apiRestLogin = function() {
      fetch(req)
        .then(resp => {
          console.log('resp', resp);
          
          return resp.json()
        }).then(resp => {
            console.log(resp)
            // router.push('/');
        });
    }

Ответ №3:

В моем случае я использовал тот же домен (no-cors).

я понял: fetch не будет отправлять файлы cookie, если вы не установите параметр инициализации учетных данных:

 fetch(url, {
    method: 'POST',
    credentials: 'same-origin',
    headers: {...},
    ...
  });