2016-01-12 2 views
3

Я прочитал каждую другую тему, которую я мог найти по этому вопросу, и ни одно из решений не работало. Я использую React + Redux + Экспресс и попытке сохранить JWT в куки в соответствии с:Куки-файлы не сохраняются с помощью Fetch

https://auth0.com/blog/2015/09/28/5-steps-to-add-modern-authentication-to-legacy-apps-using-jwts/

В моем Redux действии Я посылаю следующий запрос:

export function getCookie(token) { 
    const config = { 
    method: 'POST', 
    headers: { 
     'Content-Type': 'application/json', 
     'Authorization': 'Bearer ' + token 
    }, 
    body: JSON.stringify({ token }) 
    }; 
    return fetch('http://127.0.0.1:4000/authorize-cookie', config) 
    .then((res) => { 
    return res.json(); 
    }) 
    .then((resJson) => { 
    return resJson; 
    }) 
    .catch(err => console.log('Error: ', err)); 
} 

, так и на сервер Я отвечаю ...

app.post('/authorize-cookie', authenticate, (req, res) => { 
    res.cookie('id_token', req.body.token, { 
    maxAge: 360000 
    }); 
    res.status(200).send({ message: 'Cookie set!' }); 
}); 

... где аутентификация - это функция, которая проверяет токен.

Все, кажется, хорошо с моей головой ответа:

HTTP/1.1 200 OK 
Set-Cookie: id_token=xxx.xxx.xxx; Max-Age=360; Path=/; Expires=Tue, 12 Jan 2016 01:24:03 GMT 
Content-Type: application/json; charset=utf-8 
Content-Length: 25 
ETag: W/"19-UA3htFr0PWczMQBN6T4NpA" 
Date: Tue, 12 Jan 2016 01:18:03 GMT 
Connection: keep-alive 

Но когда я проверить вкладку источников нет куки можно найти. Я читал об отключении httpOnly и безопасности и проблемах с использованием localhost. Я также пробовал в каждом крупном браузере и не повезло.

Что здесь происходит?

+0

Ваш cookie имеет 'Max-Age = 360' (это означает 6 минут). Может, он так быстро истекает? –

+0

Я уже экспериментировал, изменяя это на часы и дни, но все равно не повезло. – Andrew

+0

Как я вижу, вы собираетесь на http: //127.0.0.1: 4000'. Это фактически тот же домен, где открывается ваша веб-страница? Вы не можете сохранять файлы cookie во время запросов на перекрестный поиск. –

ответ

11

У вас возник интересный случай. Дело в том, что поведение функции fetch отличается от XMLHttpRequest. Чтобы работать с файлами cookie в fetch, вы должны явно указать опцию credentials.

fetch('http://127.0.0.1:4000/authorize-cookie', { 
    method: 'POST', 
    body: JSON.stringify({token: token}), 
    credentials: 'same-origin', // <- this is mandatory to deal with cookies 
}) 

Согласно the article on MDN

мандатной: Запрос учетных данных, требуется использовать для запроса: опускаем же происхождения, или включают в себя. Чтобы автоматически отправлять файлы cookie для текущего домена, этот параметр должен быть предоставлен.

Смежные вопросы