首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

无法设置cookie。提供了一个背面和正面的codeSandBox完整的代码。有没有人看到一个问题。谢谢!Express + Vue 3

无法设置cookie可能是因为缺少设置响应头的相关代码。

在Express和Vue 3中,可以通过以下方式来设置cookie:

  1. 后端代码(Express):
代码语言:txt
复制
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');
});
  1. 前端代码(Vue 3):
代码语言:txt
复制
<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应用中使用了以下中间件:

代码语言:txt
复制
app.use(express.json()); // 解析JSON请求体
app.use(express.urlencoded({ extended: false })); // 解析表单请求体
app.use(cookieParser()); // 解析cookie

另外,还需要设置响应头,以允许跨域访问和允许使用cookie:

代码语言:txt
复制
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。请注意,代码示例中的域名和端口号需要根据实际情况进行修改。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 什么叫侧面指纹识别_侧面指纹识别方案还有哪些问题没有解决?

    当我们回首手机圈不难发现两个关键词——金属机身以及指纹识别。虽然指纹识别功能并不是直到今年才出现在智能手机之上,在这一年中,各大手机厂商先是采用了与iPhone相同的正面指纹识别方案,然而没过多久便有厂商提出,指纹识别功能放在机身背面更好用(成本低才是真相);一时间,关于“内裤到底该正着穿,还是反着穿?”的争论,成为各大手机发布会必谈的话题之一。直到侧面指纹识别方案的出现,广大的手机用户才发现,原来指纹识别按钮也可以放在侧面,尤其是对于索尼Z系列这样拥有全平衡设计的机型,侧面指纹识别方案简直就像是为其量身定做一般,既最大限度的保留了手机原有的美感,又能够获得极佳的使用体验。

    02

    vue服务器端渲染(SSR)实战

    SSR(Server-Side Rendering),在SPA(Single-Page Application)出现之前,网页就是在服务端渲染的。服务器接收到客户端请求后,将数据和模板拼接成完整的页面响应到客户端,客户端将响应结果渲染出来。如果用户需要浏览新的页面,则需要重复这个过程。随着Angular、React和Vue的兴起,SPA开始流行,单页面应用可以在不重载整个页面的情况下,通过ajax和服务器进行交互,高效更新部分页面,这无疑带来了良好的用户体验。然而,对于需要SEO、追求首屏速度的页面,使用SPA是糟糕的。如果我们想使用Vue,又需要考虑到SEO、首屏渲染速度,那该怎么办?好在Vue是支持服务端渲染的,接下来我们主要说的是Vue的服务端渲染。

    03

    为什么你很久都找不到biu的一下就学会前端的教程?

    很多人看了很多教程,但依然学不会前端开发的真正原因,在于他们的内心其实一直在寻找“拐棍”,期望拄拐就能走上前端巅峰。 现在关于前端开发方面的教程和文章,主要分成二大类。一是纯教程类的,有步骤,有实例,手把手的教你;二是理论类的,告诉你该怎么去看待前端技术,从哪里入手,分几个层次,每个层次学到什么程度。 而我是这二类文章都写,有教程类的,也有理论类的。时间长了之后,我发现一个很意思的现象。 我写学习思路类的文章,会有人留言给我说这是鸡汤;我写教程实例的文章,会有人留言说,太简单,一看就会,说我写的不深入。如

    05
    领券