我要评论后端设置
确保在后端正确配置 cors 中间件，允许跨域请求并支持凭据传递。
假设你使用的是 express.js，可以这样设置：
const express = require('express');
const cors = require('cors');
const app = express();
// cors 配置
const corsoptions = {
origin: 'http://localhost:5173', // 允许的前端地址
credentials: true, // 允许发送 cookie
};
app.use(cors(corsoptions));
// 示例路由
app.post('/api/teachers/login', (req, res) => {
const token = tokenencode(data); // 生成 jwt
res.cookie('token', token, {
maxage: 30 * 24 * 60 * 60 * 1000, // 30 天
httponly: true, // 仅通过 http 访问，防止 xss 攻击
secure: true, // 仅在 https 下发送
samesite: 'none' // 允许跨站点发送 cookie
});
res.json({ message: 'login success' });
});
app.listen(8080, () => {
console.log('server is running on port 8080');
});
前端请求设置
确保在前端的请求中包含 credentials: 'include'，这样可以发送和接收 cookie。
fetch('http://localhost:8080/api/teachers/login', {
method: 'post',
headers: {
'content-type': 'application/json'
},
credentials: 'include', // 允许发送和接收 cookie
body: json.stringify({
// 你的请求数据
name: this.name,
sex: this.sex,
school: this.school,
classname: this.classname, // 修改为classname
phone: this.phone,
password: this.password,
subject: this.array[this.index],
ismaster: this.ismaster
})
})
.then(response => response.json())
.then(data => {
console.log('后端响应结果:', data);
})
.catch(error => console.error('请求失败:', error));
其他注意事项
-
确保后端和前端的域名、端口号正确：确保在 cors 设置中的
origin与前端请求的地址一致。 -
检查预检请求（options 请求）：有时浏览器会先发送一个预检请求（options 请求）来检查服务器是否允许实际请求。如果预检请求失败，实际请求就会被阻止。确保后端正确处理 options 请求。
app.options('/api/teachers/login', cors(corsoptions)); // 处理预检请求 -
https 配置：如果你在开发环境中使用 https，需要确保
secure设置为true。在本地开发环境中，可以暂时设置为false进行调试。
通过这些配置，可以解决 cors 问题，并允许前端正确接收来自后端的 cookie
发表评论