从 React 应用程序接收 Express 会话 ID
Receive Express session Id from React app
我正在学习 Express.js,尝试创建一个 api 并将其连接到 React 前端。在 express 中,我使用 express-session 创建一个会话。对于身份验证,我使用 passport.js。
这是我的 app.js 文件的一部分:
const session = require('express-session');
const mongoDbStore = require('connect-mongodb-session')(session);
const store = new mongoDbStore({
uri: 'mongodb://localhost:27017/DB_NAME',
collection: 'UserSessions'
});
const app = express();
app.use(cors())
app.use(express.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
const sessionConfig = {
secret: process.env.SESSION_SECRET,
resave: false,
saveUninitialized: true,
store,
cookie: {
expires: Date.now() + 1000 * 60 * 60 * 24 * 7,
maxAge: 1000 * 60 * 60 * 24 * 7,
httpOnly: true
}
}
app.use(session(sessionConfig));
app.use(passport.initialize());
app.use(passport.session());
passport.use(new LocalStrategy(User.authenticate()));
passport.serializeUser(User.serializeUser());
passport.deserializeUser(User.deserializeUser())
app.listen(8080, () => {
console.log('listening on port 8080')
});
我的问题是,当我从我的 React 应用程序向我的后端发送请求时,我没有收到作为 cookie 的会话 ID。 在我的前端,我使用 axios , 发送请求:
import axios from 'axios';
export default axios.create({
baseURL: "http://localhost:8080/",
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
});
为什么我的前端收不到来自后端的 cookie,我该如何解决这个问题?
谢谢!
因为您的 cookie 是一个 httpOnly cookie,所以为了发送 cookie,您可以通过 fetch 方法来完成:
const req = await fetch(URL,{
method : "POST",
credentials : "include", // to send HTTP only cookies
headers: {
"Contetnt-Type" : "application/json"
},
body : JSON.stringigy({name : "Bob"})
}):
const result = await req.json();
通过axios你还可以添加withCredential属性:
axios.get(BASE_URL + '/todos', { withCredentials: true });
并且在后端考虑这个参数:
const corsOptions = {
optionsSuccessStatus: 200,
credentials: true,
}
app.use(cors(corsOptions))
我正在学习 Express.js,尝试创建一个 api 并将其连接到 React 前端。在 express 中,我使用 express-session 创建一个会话。对于身份验证,我使用 passport.js。 这是我的 app.js 文件的一部分:
const session = require('express-session');
const mongoDbStore = require('connect-mongodb-session')(session);
const store = new mongoDbStore({
uri: 'mongodb://localhost:27017/DB_NAME',
collection: 'UserSessions'
});
const app = express();
app.use(cors())
app.use(express.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
const sessionConfig = {
secret: process.env.SESSION_SECRET,
resave: false,
saveUninitialized: true,
store,
cookie: {
expires: Date.now() + 1000 * 60 * 60 * 24 * 7,
maxAge: 1000 * 60 * 60 * 24 * 7,
httpOnly: true
}
}
app.use(session(sessionConfig));
app.use(passport.initialize());
app.use(passport.session());
passport.use(new LocalStrategy(User.authenticate()));
passport.serializeUser(User.serializeUser());
passport.deserializeUser(User.deserializeUser())
app.listen(8080, () => {
console.log('listening on port 8080')
});
我的问题是,当我从我的 React 应用程序向我的后端发送请求时,我没有收到作为 cookie 的会话 ID。 在我的前端,我使用 axios , 发送请求:
import axios from 'axios';
export default axios.create({
baseURL: "http://localhost:8080/",
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
});
为什么我的前端收不到来自后端的 cookie,我该如何解决这个问题? 谢谢!
因为您的 cookie 是一个 httpOnly cookie,所以为了发送 cookie,您可以通过 fetch 方法来完成:
const req = await fetch(URL,{
method : "POST",
credentials : "include", // to send HTTP only cookies
headers: {
"Contetnt-Type" : "application/json"
},
body : JSON.stringigy({name : "Bob"})
}):
const result = await req.json();
通过axios你还可以添加withCredential属性:
axios.get(BASE_URL + '/todos', { withCredentials: true });
并且在后端考虑这个参数:
const corsOptions = {
optionsSuccessStatus: 200,
credentials: true,
}
app.use(cors(corsOptions))