Nuxt.js中HttpOnly Cookie结合Nuxt-Auth的认证实现及Axios多环境配置问题咨询

你碰到的Cookie被拒绝的问题，核心是后端返回的Cookie域名和前端代理后的域名不匹配，或者Cookie的secure属性在开发环境下冲突，下面是具体解决步骤：

1. 开发环境代理的关键配置 #

修改nuxt.config.js里的Axios和代理配置，重点是开启withCredentials和changeOrigin：

// nuxt.config.js
export default defineNuxtConfig({
  modules: ['@nuxtjs/axios'],
  axios: {
    baseURL: process.env.NODE_ENV === 'production' ? 'https://your-prod-api.com' : '/api',
    withCredentials: true, // 必须开启，允许携带Cookie
    credentials: true
  },
  proxy: {
    '/api': {
      target: 'https://your-dev-api.com', // 你的后端开发环境地址
      changeOrigin: true, // 关键：让后端认为请求来自前端域名（localhost:3000）
      pathRewrite: { '^/api': '' }, // 把/api前缀去掉转发给后端
      // 开发环境下，如果后端设置了Cookie的secure: true，需要去掉这个属性，因为localhost是http协议，浏览器不会保存secure Cookie
      onProxyRes: function(proxyRes, req, res) {
        if (proxyRes.headers['set-cookie']) {
          proxyRes.headers['set-cookie'] = proxyRes.headers['set-cookie'].map(cookie => 
            cookie.replace(/secure;/g, '')
          )
        }
      }
    }
  },
  runtimeConfig: {
    public: {
      apiBase: process.env.NODE_ENV === 'production' ? 'https://your-prod-api.com' : '/api'
    }
  }
})

2. 后端配合调整Cookie配置 #

如果可能的话，让后端根据环境动态设置Cookie的domain：

• 开发环境：把domain设为localhost或者留空（留空时浏览器会自动使用当前请求的域名，也就是localhost）
• 生产环境：设为你的正式域名（比如.yourdomain.com，兼容子域名）

另外，后端的CORS配置必须：

• 设置Access-Control-Allow-Credentials: true
• Access-Control-Allow-Origin指定为前端的具体域名（开发环境是http://localhost:3000，生产环境是你的正式域名），不能用*

1. 后端：返回带有HttpOnly、SameSite=Lax、Secure（生产环境）属性的认证Cookie，名称和前端配置一致。
2. Nuxt Auth：使用cookie策略，对应后端的Cookie名称，根据环境动态设置secure属性。
3. 请求层面：服务端请求自动转发Cookie，客户端请求开启withCredentials，后端CORS配合允许凭证。
4. 开发环境：通过代理转发请求，修改代理响应中的Cookie属性（去掉secure），避免域名不匹配问题。

这样既保留了HttpOnly Cookie的安全性，又能充分利用Nuxt的SSR优势，不用局限于客户端请求。

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