Узел реакции не может передать cookie в браузер (ошибка crocs)

По какой-то причине я не могу хранить файлы 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

Хотя другие ответы могут быть технически правильными, более фундаментальный вопрос заключается в том, почему ваш интерфейс и серверная часть работают на разных портах. Ошибка CORS, с которой вы столкнулись, - это браузер, пытающийся предотвратить вызов веб-сайта на неизвестный, возможно, вредоносный внешняя сущность. Обычно вам нужно, чтобы обе службы работали на одном порте, чтобы имитировать их происхождение из одного домена.

Ryan Villanueva 26.10.2018 17:39

@RyanVillanueva Пожалуйста, поделитесь своим ответом здесь stackoverflow.com/questions/52996320/using-nodejs-with-react

anny123 26.10.2018 23:56
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
2
896
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Если у вас возникли проблемы с паспортными сессиями, попробуйте вместо этого использовать экспресс-сессию.

'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()) для использования экспресс-сессии?

anny123 26.10.2018 09:03

Я не очень разбираюсь в паспорте ... но, возможно, вам нужно что-то здесь поменять. Постарайтесь убедиться, что нет других сессий, кроме экспресс-сессии.

Sandro Schaurer 26.10.2018 09:04

Большое спасибо за ответ, но я использую паспортную стратегию, и, следовательно, я, вероятно, предпочел бы использовать паспортную сессию.

anny123 26.10.2018 09:06

так что вы можете попробовать, если выборка с учетными данными: include помогает .... может этого достаточно, чтобы заставить его работать :)

Sandro Schaurer 26.10.2018 09:10

у вас включен корс на стороне сервера?

Sandro Schaurer 26.10.2018 09:13

Яп, app.use(cors())

anny123 26.10.2018 09:14

установлено ли для параметра «учетные данные» значение «истина»?

Sandro Schaurer 26.10.2018 09:15

Я не уверен, что это значит и как мы это делаем?

anny123 26.10.2018 09:17

app.use (cors ({credentials: true}))

Sandro Schaurer 26.10.2018 09:18

Сделал это. Нет, проблема все еще остается

anny123 26.10.2018 09:21

Можете ли вы попробовать разветвляться и передвигаться, чтобы увидеть это самостоятельно. Может, тогда в этом будет больше смысла?

anny123 26.10.2018 09:21
{credentials: 'include'} в axios (или запросе выборки) выдает ошибку корс
anny123 26.10.2018 10:18

в чем ошибка? может вам нужно установить cors на определенное происхождение

Sandro Schaurer 26.10.2018 10:19

Если я сделаю что-то вроде этого 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)

anny123 26.10.2018 10:22

А на стороне клиента я использую плагин для включения запроса на перекрестное происхождение.

anny123 26.10.2018 10:23

хорошо, так что переходите к серверу cors: app.use(cors({credentials: true, origin: ['http://localhost:3001', 'http://yourIP:3001']}))

Sandro Schaurer 26.10.2018 10:24

трепло я делаю это. Я также изменил свой адрес на стороне сервера на localhost:8080 и на стороне клиента на localhost:3000. Вот как выглядит мой cors `const corsOptions = {origin: 'локальный: 3000', credentials: true,} app.use (cors (corsOptions));` Заметка: подталкивает коммит в моем репозитории github, чтобы отразить то же

anny123 26.10.2018 10:37
chat.stackoverflow.com/rooms/182530/…
anny123 26.10.2018 11:48

Посмотри мой последний Пост => Я его обновил. Вот видите, что варианты корса должны быть внутри ''

Sandro Schaurer 26.10.2018 13:43
Ответ принят как подходящий

Поэтому отправьте файлы 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 26.10.2018 14:25

@ anny123 У меня это не работает, потому что у них другой порт?

jcarlosweb 21.03.2020 17:45

@jcarlosweb Сандро является фактическим автором ответа. Вы должны отметить его и спросить

anny123 23.03.2020 05:59

Вам необходимо добавить все свои IP-адреса, которые вы используете для своего внешнего интерфейса, чтобы разрешить запросы cors по желанию. Но поскольку ваш бэкэнд работает на другом порту, чем ваш интерфейс. Итак, вам нужен другой порт в вашем запросе на выборку

Sandro Schaurer 24.03.2020 09:33

это сделало мой день. Спасибо, @Sandro Schaurer.

RaghuNath Vadlakonda 13.08.2021 07:04

Другие вопросы по теме