Как установить куки-файлы express, react.js
Я создаю систему входа в систему, используя экспресс для node.js и response.js. В моем бэкэнде, когда пользователь входит в систему, он создает файл cookie. Когда я перехожу в Сеть> Войти, я вижу следующее:
Set-Cookie: user_id = s% 3A1.E% 2FWVGXrIgyXaM4crLOoxO% 2Fur0tdjeN6ldABcYOgpOPk; Путь = /; HttpOnly; Безопасный
Но когда я перехожу в Application> Cookies> http: // локальный: 3000, там ничего нет. Я считаю, что это потому, что я не позволяю учетным данным проходить правильно, когда я делаю почтовый запрос со стороны клиента. Как мне это сделать? Пожалуйста, дайте мне знать, могу ли я как-нибудь улучшить свой вопрос.
//Login back-end
router.post('/login', (req, res, next) => {
if (validUser(req.body)) {
User
.getOneByEmail(req.body.email)
.then(user => {
if (user) {
bcrypt
.compare(req.body.password_digest, user.password_digest)
.then((result) => {
if (result) {
const isSecure = process.env.NODE_ENV != 'development';
res.cookie('user_id', user.id, {
httpOnly: true,
secure: isSecure,
signed: true
})
res.json({
message: 'Logged in'
});
} else {
next(new Error('Invalid Login'))
}
});
} else {
next(new Error('Invalid Login'))
}
});
} else {
next(new Error('Invalid Login'))
}
});
//Allow CORS index.js
app.use(
cors({
origin: "http://localhost:3000",
credentials: true
})
);
//Login client side (React.js)
loginUser(e, loginEmail, password) {
e.preventDefault();
let email = loginEmail;
let password_digest = password;
let body = JSON.stringify({ email, password_digest });
fetch("http://localhost:5656/api/login", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
credentials: "include",
body
})
.then(response => response.json())
.then(user => {
console.info(user);
});
}
Спасибо за ваш комментарий, Самир. Однако заставить его работать не удалось. Я использую универсальный файл cookie следующим образом: импортируйте файлы cookie из 'universal-cookie'; const cookie = новые файлы cookie (); cookies.set ('myCat', 'Pacman', {путь: '/'}); console.info (cookies.get ('myCat')); // Pacman Когда я перехожу в Application> Cookies> локальный: 3000, я вижу там этот cookie myCat. Но я не уверен, как интегрировать это с моим приложением. (Я пытаюсь правильно отобразить код, но не могу.)
Вся ваша конфигурация кажется правильной, за исключением одной вещи, в которой я не уверен. Когда вы устанавливаете cookie в своем маршруте публикации, убедитесь, что флаг secure имеет значение false (только для разработки). В процессе производства установите для него true. Это потому, что localhost - это HTTP, а не HTTPS. Поэтому убедитесь, что ваша переменная isSecure ложна. Это единственное, что мне кажется потенциальной проблемой.
Ответы 4
Вы должны быть уверены в том, что устанавливаете «учетные данные» на сервере и в приложении.
Попробуйте установить на сервере index.js или app.js следующее:
app.use(function(req, res, next) {
res.header('Content-Type', 'application/json;charset=UTF-8')
res.header('Access-Control-Allow-Credentials', true)
res.header(
'Access-Control-Allow-Headers',
'Origin, X-Requested-With, Content-Type, Accept'
)
next()
})
и на своем клиентском сайте добавьте такие параметры:
let axiosConfig = {
withCredentials: true,
}
export async function loginUser(data) {
try {
const res = await axios.post(
`${URL}:${PORT}/${API}/signin`,
data,
axiosConfig
)
return res
} catch (error) {
console.info(error)
}
}
Редактировать
Чтобы установить "учетные данные" на сервере, нам понадобится эта строка:
res.header('Access-Control-Allow-Credentials', true)
Это позволит вам обрабатывать учетные данные, включенные в заголовки.
Вы также должны указать axios установить учетные данные в заголовках с помощью:
withCredentials: true
Не забудьте настроить промежуточное ПО cors.
Ваш экспресс-код node.js
const express = require("express");
const cors = require('cors')
const app = express();
app.use(cors(
{
origin: 'http://localhost:3000',
optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
}
));
app.use(function(req, res, next) {
res.header('Content-Type', 'application/json;charset=UTF-8')
res.header('Access-Control-Allow-Credentials', true)
res.header(
'Access-Control-Allow-Headers',
'Origin, X-Requested-With, Content-Type, Accept'
)
next()
})
app.get("/auth", function(req, res){
res.cookie('token', 'someauthtoken')
res.json({id: 2});
});
app.listen(3030);
Ваш интерфейсный код
import React, { useEffect } from 'react';
import axios from 'axios';
async function loginUser() {
try {
const res = await axios.get(
'http://localhost:3030/auth',
{
withCredentials: true,
}
)
return res
} catch (error) {
console.info(error)
}
}
function App() {
useEffect(() => {
loginUser();
}, [])
return (
<div>
</div>
);
}
export default App;
Это потому, что вы установили httpOnly: true.
Это заблокирует видимость на стороне клиента, например, чтение из javaScript document.cookie().
Вы можете решить эту проблему, выключив его.
Если вы не видите свой файл cookie в браузере, я думаю, это потому, что вы устанавливаете hhtpOnly в значение true в параметрах cookie.
cookie.httpOnly Задает логическое значение для атрибута HttpOnly Set-Cookie. Если правда, атрибут HttpOnly установлен, в противном случае - нет. По умолчанию установлен атрибут HttpOnly.
Примечание: будьте осторожны при установке этого значения в true, так как соответствующие клиенты не позволят клиентскому JavaScript видеть файл cookie в document.cookie.
res.cookie('user_id', user.id, {
httpOnly: false, // try this
secure: isSecure,
signed: true
})
Используйте библиотеку response-cookie, тогда вы можете использовать cookies.get ('key') и cookies.set ('key', 'value')