无法设置cookie可能是因为缺少设置响应头的相关代码。
在Express和Vue 3中,可以通过以下方式来设置cookie:
const express = require('express');
const app = express();
app.get('/setCookie', (req, res) => {
// 设置cookie
res.cookie('cookieName', 'cookieValue', {
maxAge: 1000 * 60 * 60, // 设置cookie的过期时间,单位为毫秒
httpOnly: true, // 设置为只能由服务器访问,禁止客户端修改
});
res.send('Cookie设置成功');
});
app.listen(3000, () => {
console.log('Server started on port 3000');
});
<script>
export default {
mounted() {
this.$axios.get('/setCookie').then((response) => {
console.log(response.data);
}).catch((error) => {
console.error(error);
});
},
};
</script>
在这个例子中,后端代码使用了Express框架,并创建了一个GET路由/setCookie
用于设置cookie。使用res.cookie
方法来设置cookie的名称、值和选项。在前端代码中,使用了Vue 3和axios库发送GET请求来触发后端的/setCookie
路由。
如果无法设置cookie,可能是因为缺少相关的中间件或响应头设置不正确。需要确保在Express应用中使用了以下中间件:
app.use(express.json()); // 解析JSON请求体
app.use(express.urlencoded({ extended: false })); // 解析表单请求体
app.use(cookieParser()); // 解析cookie
另外,还需要设置响应头,以允许跨域访问和允许使用cookie:
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8080'); // 允许访问的域名
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS'); // 允许的HTTP方法
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Cookie'); // 允许的请求头
res.setHeader('Access-Control-Allow-Credentials', 'true'); // 允许携带cookie
next();
});
通过以上设置,即可在Express和Vue 3中成功设置cookie。请注意,代码示例中的域名和端口号需要根据实际情况进行修改。
领取专属 10元无门槛券
手把手带您无忧上云