По какой-то причине я не могу хранить файлы cookie в своем браузере.
Я впервые работаю с Реагировать и NodeJS
Приложение My React работает на localhost:3000
, а приложение NodeJS - на localhost:8080
.
Репозиторий Git для то же самое случается это
Итак, я успешно могу войти в систему, сохранить учетные данные в БД и, возможно, сериализовать и десериализовать.
Я не разделяю код для стратегии Google, сериализации и де-сериализации, так как считаю, что этой проблемы здесь нет (если вы думаете, что вам нужно просмотреть его кликните сюда
Это гугл редирект возвращается при следующем обратном вызове
router.get("/google/callback", passport.authenticate('google', { failureRedirect: "/", session: false }), (req, res) => {
res.redirect("http://localhost:3000/")
})
В моем server.js (основном файле, я запускаю сервер узла, выполняя node server.js), я делаю это для хранения cookie
app.use(cors({
credentials: true,
origin: ['http://localhost:3000'] // here goes any Frontend IP Adress
}))
//We are setting cookie here
app.use(cookieSession({
maxAge: 24*60*60*1000, //cookies is valid for a day
keys: ['fgfhfjhfad']
}))
app.use(passport.initialize())
app.use(passport.session())
А потом, когда я это сделаю в мой реагирующий интерфейс
componentWillMount() {
axios.get("http://localhost:8080/", {withCredentials: true}).then(response => {
console.info(response)
}).catch(error => {
console.info(error)
})
}
Где мой локальный: 3000 / выглядит так
app.get("/", (req, res) => {
if (req.user) {
if (req.isFormFilled) {
res.redirect("http://localhost:3000/home")
} else {
res.json(req.user)
}
} else {
res.json("user does not exsist")
}
})
Он всегда регистрирует res.json("user does not exsist")
, но если я напрямую перехожу на localhost: 3000 в моем браузере, я вижу свой req.user <[См .: обновление под вопросом]
Ps; Я включаю запрос на другой источник в моем браузере
[Вопрос:] Может кто-нибудь помочь мне разобраться, что я делаю неправильно?
[Обновлять:] Похоже, у нас может быть ошибка crocs, я изменил свой код и получаю это как ошибку во внешнем интерфейсе
Access to XMLHttpRequest at 'localhost:8080' from origin 'localhost:3000' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute
Если я удалю {withCredentials: true}
в моем запросе аксиомы, указанная выше ошибка исчезнет, но затем будет записано пользователь не существует в response.data
@RyanVillanueva Пожалуйста, поделитесь своим ответом здесь stackoverflow.com/questions/52996320/using-nodejs-with-react
Если у вас возникли проблемы с паспортными сессиями, попробуйте вместо этого использовать экспресс-сессию.
'express-session' Сам создает файлы cookie и отправляет их.
app.use(session({
secret: 'keyboard cat',
resave: false,
saveUninitialized: true
}))
Если вы используете это, вы можете захватить сеанс в каждом вызове отдыха.
app.get('/', (req, res) => {
req.session.[anyVariableUWantHere] = true;
res.send('done');
});
Теперь сеанс создан.
Если у вас возникнут проблемы с React, попробуйте следующее:
в server.js: app.use (cors ({ учетные данные: правда, [...] }))
теперь вам просто нужно отредактировать свою 'выборку' в React следующим образом:
fetch('http://localhost:3000/call', {credentials: 'include'}).then((result) => {
return result.json()
}).then((data) => {
//Do something
});
Учетные данные: 'include' важны для React для получения Session-Cookie. По умолчанию выборка не загружает файлы cookie.
нужно ли менять app.use(passport.initialize())
для использования экспресс-сессии?
Я не очень разбираюсь в паспорте ... но, возможно, вам нужно что-то здесь поменять. Постарайтесь убедиться, что нет других сессий, кроме экспресс-сессии.
Большое спасибо за ответ, но я использую паспортную стратегию, и, следовательно, я, вероятно, предпочел бы использовать паспортную сессию.
так что вы можете попробовать, если выборка с учетными данными: include помогает .... может этого достаточно, чтобы заставить его работать :)
у вас включен корс на стороне сервера?
Яп, app.use(cors())
установлено ли для параметра «учетные данные» значение «истина»?
Я не уверен, что это значит и как мы это делаем?
app.use (cors ({credentials: true}))
Сделал это. Нет, проблема все еще остается
Можете ли вы попробовать разветвляться и передвигаться, чтобы увидеть это самостоятельно. Может, тогда в этом будет больше смысла?
{credentials: 'include'}
в axios (или запросе выборки) выдает ошибку корсв чем ошибка? может вам нужно установить cors на определенное происхождение
Если я сделаю что-то вроде этого axios.get("http://localhost:8080/", {withCredentials: true}).then(response => { console.info(response)
, то я получаю следующую ошибку: Доступ к XMLHttpRequest в 'локальный: 8080' из источника 'локальный: 3000' был заблокирован политикой CORS: значение заголовка 'Access-Control-Allow-Origin' в ответе не должно быть подстановочным знаком '*', когда режим учетных данных запроса 'включают'. Режим учетных данных запросов, инициированных XMLHttpRequest, контролируется атрибутом withCredentials Я включил cors на своем сервере (1/2)
А на стороне клиента я использую плагин для включения запроса на перекрестное происхождение.
хорошо, так что переходите к серверу cors: app.use(cors({credentials: true, origin: ['http://localhost:3001', 'http://yourIP:3001']}))
трепло я делаю это. Я также изменил свой адрес на стороне сервера на localhost:8080
и на стороне клиента на localhost:3000
. Вот как выглядит мой cors `const corsOptions = {origin: 'локальный: 3000', credentials: true,} app.use (cors (corsOptions));` Заметка: подталкивает коммит в моем репозитории github, чтобы отразить то же
Посмотри мой последний Пост => Я его обновил. Вот видите, что варианты корса должны быть внутри ''
Поэтому отправьте файлы cookie через REST, чтобы они могли:
Установите Cors на стороне сервера:
app.use(cors({
'allowedHeaders': ['sessionId', 'Content-Type'],
'exposedHeaders': ['sessionId'],
'credentials': true,
'origin': ['http://[FRONTEND-IP]:[FRONTEND-PORT]', 'http://[ALTERNATIVE-FRONTEND-IP]:[FRONTEND-PORT]'],
}))
Для Frontend вам нужно настроить вызов следующим образом:
fetch('http://[API-IP]:[API-PORT]/call', {credentials: 'include'}).then((result) => {
return result.json()
}).then((data) => {
//Do something
});
вы также можете использовать асинхронную выборку:
async function loadData() {
let response = await fetch(
'http://[API-IP]:[APi-PORT]/call',
{credentials: 'include'}
);
return response.json();
}
это, конечно, относится к использованию службы отдыха с телами json. Если вы полагаетесь на структуру, отличную от json, вам необходимо проанализировать свой ответ вручную.
Также интересная статья в сети о Crocs https://50linesofco.de/post/2017-03-06-cors-a-guided-tour
Вы чемпион, это работает. Просто измените адрес происхождения на 3000
вместо 8080
. Кроме того, просто чтобы вы знали, кто-то еще проголосовал за ваш ответ, а я за него :) Большое спасибо :)
@ anny123 У меня это не работает, потому что у них другой порт?
@jcarlosweb Сандро является фактическим автором ответа. Вы должны отметить его и спросить
Вам необходимо добавить все свои IP-адреса, которые вы используете для своего внешнего интерфейса, чтобы разрешить запросы cors по желанию. Но поскольку ваш бэкэнд работает на другом порту, чем ваш интерфейс. Итак, вам нужен другой порт в вашем запросе на выборку
это сделало мой день. Спасибо, @Sandro Schaurer.
Хотя другие ответы могут быть технически правильными, более фундаментальный вопрос заключается в том, почему ваш интерфейс и серверная часть работают на разных портах. Ошибка CORS, с которой вы столкнулись, - это браузер, пытающийся предотвратить вызов веб-сайта на неизвестный, возможно, вредоносный внешняя сущность. Обычно вам нужно, чтобы обе службы работали на одном порте, чтобы имитировать их происхождение из одного домена.