Nuxt3+Pinia部署后Cookie无法设置问题求助

核心问题点 #

1. 硬编码的secure标志：你在代码中固定设置secure: true，但浏览器仅会在HTTPS环境下保存Secure Cookie（localhost除外）。若预发布环境使用HTTP，Cookie会被浏览器拒绝存储。
2. 重复创建Cookie实例：在userToken动作中重新创建了useCookie实例，而非直接使用Store中已绑定的Cookie状态，可能导致状态不同步。
3. maxAge单位错误：useCookie的maxAge参数接受秒数而非毫秒，你当前设置的7*24*3600*1000会导致Cookie有效期异常（实际为19年而非7天）。
4. 缺失必要的Cookie配置：未明确设置path，可能导致Cookie仅在特定路径下可用；若预发布环境为子域名，未配置domain会限制Cookie的跨子域访问。

修正后的代码 #

stores/auth.ts #

import { defineStore } from 'pinia';

export const useAuthStore = defineStore({
  id: 'auth',
  state: () => {
    return {
      token: useCookie('token', {
        maxAge: 7 * 24 * 3600, // 7天，单位为秒
        sameSite: 'strict',
        secure: process.env.NODE_ENV === 'production', // 仅生产/预发布环境启用Secure
        path: '/', // 确保Cookie在全站路径下可用
        // 若预发布环境为子域名（如site.domail.com），取消下方注释
        // domain: '.domail.com'
      })
    }
  },

  actions: {
    async userToken({ userId }) {
      const { data }: any = await useFetch('/api/auth', {
        method: 'post',
        headers: { 'Content-Type': 'application/json' },
        body: { userId }
      });

      if (data?.value?.token) {
        this.token.value = data.value.token; // 直接更新Store中绑定的Cookie
      }
    }
  }
})

pages/Login.vue（简化版） #

<script>
import { useAuthStore } from '@/stores/auth';

export default defineComponent({
  name: 'LogIn',
  data() {
    return {
      userId: 1,
      authStore: useAuthStore()
    }
  },
  
  computed: {
    token() {
      return this.authStore.token;
    }
  },
  
  methods: {
    async getUserToken() {
      await this.authStore.userToken({ userId: this.userId });
      console.log(this.authStore.token);
    }
  },
})
</script>

<template>
  <div>
    <div>{{ token }}</div>
    <button @click="getUserToken"> log in </button>
  </div>
</template>

额外检查项 #

1. 预发布环境HTTPS配置：确保预发布环境已启用HTTPS，否则需临时将secure设为false（不建议生产环境这么做）。
2. 浏览器DevTools验证：打开浏览器开发者工具→Application→Cookies，检查是否存在tokenCookie；若不存在，查看Console面板是否有Cookie相关错误提示。
3. 响应头检查：在Network面板中查看/api/auth请求的响应头，确认是否包含Set-Cookie字段。

内容的提问来源于stack exchange，提问作者Dev