使用ReactAxios post请求时未设置express会话cookie

vcirk6k6  于 2021-06-10  发布在  Redis
关注(0)|答案(2)|浏览(417)

设置
我已经使用createreact应用程序设置了一个前端环境。在这个环境中,我使用axios向我的节点js express后端服务器/登录端点发出post请求。我使用express会话设置会话中间件,并将会话存储在redis中。我有所有这些运行在本地主机目前。
环境
React应用程序-http://localhost:3005/kp(注意:服务在http://localhost:3005但是,所有路由中都有/kp)
express后端-http://localhost:5001
redis-http://localhost:6379
什么有效
当前端向后端发送请求时,express服务器执行它的操作并对用户进行身份验证;它将用户名存储在req.session.username中(这只是一个测试),redis控制台显示键值存储成功,frontend network选项卡显示一个200状态,带有一个set cookie响应头和一个显示cookie的选项卡(下面的屏幕截图)。
问题
看起来一切正常,但浏览器中没有设置cookie。我刷新了页面,尝试了很多次,但它不会在任何浏览器中设置cookie(googlechrome&safari)。我感到很沮丧,因为chrome似乎承认set cookie存在,但出于某种原因忽略了它。
我试过的
轴心
我试过用凭据设置:true-不起作用
已验证在post请求之后,是否将具有设置cookie的cookie发送回前端
后端
我已经检查了我的cors政策,但他们似乎很好;但是,我不擅长cors,所以可能会有错误的配置
已尝试在cors策略中将凭据设置为true
已验证正在使用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
          });
        });

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

截屏
网络响应

请求cookie

应用程序cookies

如您所见,浏览器cookie列表中缺少cookie。我有一种感觉,这是一个小东西,但我没有找到任何东西。
我没有收到任何服务中的任何错误。事先谢谢你的帮助。

kpbpu008

kpbpu0081#

是否确实正确设置了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 }
  }
        ....
6gpjuf90

6gpjuf902#

解决方案
作为米查ł lach指出我在axios调用中将withcredentials放错了位置。
前端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-dynamic-origin公司
后端

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

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

相关问题