设置
我已经使用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。我有一种感觉,这是一个小东西,但我没有找到任何东西。
我没有收到任何服务中的任何错误。事先谢谢你的帮助。
2条答案
按热度按时间kpbpu0081#
是否确实正确设置了axios选项?
您有:
试试这个:
6gpjuf902#
解决方案
作为米查ł lach指出我在axios调用中将withcredentials放错了位置。
前端axios
然而,一旦我这样做,我开始得到cors错误。cors错误是在访问控制允许源(origin)配置中不能有通配符“*”。对于这个例子,我把它改为只指向http://localhost:3005; 但是,有一些方法可以创建动态白名单,如下所述:https://www.npmjs.com/package/cors#configuring-cors-w-dynamic-origin公司
后端
一旦我做了这些更改,cookie就开始在前端正确设置。