使用React-Axios POST请求时未设置快速会话Cookie

Question

设置

我已经使用CreateReact应用程序设置了前端环境。在此环境中，我使用Axios向我的节点JS Express后端服务器/登录endpoint发出POST请求。我使用express sessions设置会话中间件，并将会话存储在Redis中。我目前在本地主机上运行所有这些。

环境

>

React App-http://localhost:3005/kp（注意：服务运行在http://localhost:3005但是，所有的路由都 /kp）

快速后端-http://localhost:5001

Redis-http://localhost:6379

什么工作

当前端将请求发送到后端时，Express server执行其操作并对用户进行身份验证；它将用户名存储在req中。一场用户名（这只是一个测试），Redis控制台显示键值存储成功，前端网络选项卡显示200状态，带有设置的Cookie响应头和显示Cookie的选项卡（下面的屏幕截图）。

问题所在

看起来一切正常，但浏览器中没有设置cookie。我刷新了页面，尝试了很多次，但它不会在任何浏览器（谷歌浏览器）中设置cookie

我试过的

Axios

1. 我已经尝试设置凭据：真-不工作
2. 验证了在POST请求后，带有Set-Cookie的cookie被发送回前端

后端

1. 我已经检查了我的CORS策略，但它们看起来很好；然而，我不太喜欢CORS，所以那里可能会有配置错误
2. 在CORS策略中尝试将凭据设置为true
3. 验证了使用Redis设置变量的会话。

密码

响应前端Axios 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
          });
        });

快速服务器

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}`);
});

截图

网络响应

请求Cookie

应用Cookies

如您所见，浏览器cookie列表中缺少cookie。我有一种感觉，这是一件小事，但我一直没有找到任何东西。

我在任何服务中都没有收到任何错误。提前感谢您的帮助。

Answer 1

是否确实正确设置了axios选项？

你有：

    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 }
  }
        ....

Answer 2

解决方案

正如MichałLach指出的那样，我在Axios调用中将凭据放错了位置。

前端轴

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

然而，一旦我这样做了，我开始得到CORS错误。CORS错误是您的访问控制允许源（Origin）配置中不能有通配符“*”。对于这个示例，我将其更改为仅指向http://localhost:3005; 但是，有一些方法可以创建动态白名单，如下所述：https://www.npmjs.com/package/cors#configuring-cors-w-动态原点

后端

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

一旦我做了这些更改，cookie就开始在前端正确设置。