Express Session Cook ie Не устанавливается при использовании React Ax ios POST-запрос - PullRequest
1 голос
/ 04 августа 2020

Настройка

Я настроил интерфейсную среду с помощью create-response-app. В этой среде я использую Ax ios для отправки запроса POST на мой Node JS Express Backend Server / конечную точку входа. Я устанавливаю промежуточное ПО для сеансов, используя express -сессии и сохраняю сеансы в Redis. У меня все это сейчас работает на localhost.

Environment

  • React App - http://localhost: 3005 / kp (Примечание: служба запускается на http://localhost: 3005, однако все маршруты содержат / kp)

  • Express Backend - http://localhost: 5001

  • Redis - http://localhost: 6379

Что работает

Когда интерфейс отправляет запрос на бэкэнд, сервер Express это делает вещь и аутентифицирует пользователя; он сохраняет имя пользователя в req.session.username (это просто как тест), консоль Redis показывает, что хранилище значений ключа было успешным, вкладка внешней сети показывает статус 200 с заголовком ответа Set-Cook ie и вкладка, которая показывает повар ie (скриншоты ниже).

Проблема

Кажется, все работает нормально, но повар ie не установлен в Браузер. Я обновил страницу, попробовал еще раз много раз, но он не установил Cook ie ни в одном браузере (Google Chrome и Safari). Я расстраиваюсь, потому что кажется, что Chrome подтверждает наличие Set-Cook ie, но по какой-то причине игнорирует его.

What I Tried

Ax ios

  1. Я пробовал установить с помощью Credentials: true - Не работает
  2. Проверено, что повар ie с помощью Set-Cook ie отправляется обратно к интерфейсу после запроса POST

Backend

  1. Я проверил свои политики CORS, но они кажутся нормальными; однако я не очень хорошо разбираюсь в CORS, поэтому там могла быть неправильная конфигурация.
  2. Пробовал установить для учетных данных значение true в политике CORS
  3. Подтверждено, что сеанс с переменными устанавливается с помощью Redis.

Код

React Frontend Ax ios POST-запрос

      axios.post('http://localhost:5001/login', loginBody, {
        headers: {
          'Content-Type': 'application/json'
        }
      },
        { withCredentials: true }
      )
        .then((res) => {
          console.log(res);
        })
        .catch((error) => {
          console.log(error);
          this.setState({
            errorMessage: `Server Error`,
            loading: false
          });
        });

Express Сервер

const express = require('express');
const http = require('http');
const cors = require('cors');
const socketServer = require('./src/sockets');
const bodyParser = require('body-parser');
const session = require('express-session');
const redis = require('redis');
const redisClient = redis.createClient();
const redisStore = require('connect-redis')(session);
process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";
const port = process.env.PORT || 5001;
const { loginRoutes } = require('./src/routers');
const app = express();

redisClient.on('error', (err) => {
  console.log('Redis error: ', err);
});

app.use(cors({
  origin: '*',
  methods: ['POST', 'PUT', 'GET', 'OPTIONS', 'HEAD'],
  credentials: true
}));

// Redis session storage setup
// API Docs for express-session: https://www.npmjs.com/package/express-session
const sessionMiddleware = session({
  secret: process.env.REDIS_SECRET || 'testing12345',
  name: 'session',
  resave: false,
  saveUninitialized: true,
  cookie: {
    secure: false
  },
  store: new redisStore(
    {
      host: process.env.REDIS_HOSTNAME,
      port: process.env.REDIS_PORT,
      client: redisClient,
      ttl: 604800
    }
  )
});

// Uses session middleware
app.use(sessionMiddleware);

app.use(bodyParser.json({ limit: '5mb' }));

const server = http.createServer(app);

// Starts Socket Server
socketServer(server, sessionMiddleware);

// Uses the routes from the router directory
app.use(loginRoutes);

server.listen(port, () => {
  console.log(`Listening on port: ${port}`);
});

Скриншоты

Ответ сети

Response and Request Headers Axios

Request Cookie

Response Cookie

Application Cookies

Файлы cookie приложений

Как видите, ie отсутствует в списке файлов cookie браузера. У меня такое ощущение, что это что-то маленькое, но я не смог ничего найти.

Я не получаю никаких ошибок ни в одной службе. Заранее благодарим вас за помощь.

Ответы [ 2 ]

1 голос
/ 04 августа 2020

Вы уверены, что правильно устанавливаете параметры ax ios?

У вас есть:

    axios.post('http://localhost:5001/login', loginBody, {
    headers: {
      'Content-Type': 'application/json'
    }
  },
    { withCredentials: true }
  )
    .then((res) => {
      console.log(res);
    })
    .catch((error) => {
      console.log(error);
      this.setState({
        errorMessage: `Server Error`,
        loading: false
      });
    });

Попробуйте это:

    axios.post('http://localhost:5001/login', loginBody, {
    headers: {
      'Content-Type': 'application/json'
    },
    { withCredentials: true }
  }
        ....
0 голосов
/ 04 августа 2020

Решение

Как указал Михал Лах, я поместил withCredentials не в то место в вызове Ax ios.

Frontend Ax ios

  axios.post('http://localhost:5001/login', loginBody, {
    headers: {
      'Content-Type': 'application/json'
    },
    withCredentials: true
  })

Однако, как только я это сделал, я начал получать ошибку CORS. Ошибка CORS заключалась в том, что в вашей конфигурации Access-Control-Allow-Origin (origin) не может быть подстановочного знака «*». В этом примере я изменил его так, чтобы он указывал только на http://localhost: 3005; однако есть способы сделать динамические c белые списки, как описано здесь: https://www.npmjs.com/package/cors#configuring -cors-w-Dynami c -origin

Backend

app.use(cors({
  origin: 'http://localhost:3005',
  methods: ['POST', 'PUT', 'GET', 'OPTIONS', 'HEAD'],
  credentials: true
}));

Как только я внес эти изменения, Cook ie начал правильно настраиваться во внешнем интерфейсе.

...