Express无法设置httpOnly Cookie，如何让浏览器保存该Cookie？

你的核心问题有两个：一是前端Express转发请求时没把后端设置的Cookie传递给浏览器；二是缺少CORS和凭证配置导致浏览器拒绝保存Cookie。下面分步骤解决：

1. 修复前端服务器的转发逻辑，传递Cookie #

当前你的前端服务器只返回了后端的响应体，完全忽略了后端设置的Set-Cookie响应头。修改转发代码，把后端的Cookie头传递给浏览器：

const api = axios.create({
  baseURL: process.env.NODE_ENV === "development" ? process.env.PNB_API_DEV : process.env.PNB_API_PROD,
  // 让Axios接收后端返回的Cookie
  withCredentials: true
})

const router = Router()

router.post('/s-i', async (req, res) => {
  try {
    const { data, headers } = await api.post('/sign-in', req.body)
    // 把后端的Set-Cookie头转发给浏览器
    if (headers['set-cookie']) {
      res.setHeader('Set-Cookie', headers['set-cookie'])
    }
    res.json(data)
  } catch (e) {
    // 错误场景下也传递可能的Cookie
    if (e.response?.headers['set-cookie']) {
      res.setHeader('Set-Cookie', e.response.headers['set-cookie'])
    }
    return res.status(e.response.status).json(e.response.data)
  }
});

2. 配置后端的CORS设置 #

后端需要允许前端服务器的跨域请求，并且允许携带凭证。安装cors包后，在后端Express中配置：

const cors = require('cors');

// 开发环境允许前端服务器域名（http://localhost:8010）
const corsOptions = {
  origin: 'http://localhost:8010',
  credentials: true, // 允许请求携带凭证（Cookie）
  exposedHeaders: ['Set-Cookie'] // 确保前端能访问到Set-Cookie头
};

app.use(cors(corsOptions));

注意：生产环境要把origin改成前端服务器的实际域名，不能用*，否则credentials: true会失效。

3. 配置前端Axios的凭证参数 #

前端浏览器发送请求到前端服务器时，需要允许携带凭证，修改前端的Axios实例：

const api = axios.create({
  baseURL: apiUrl,
  headers: {
    'Content-Type': 'application/json'
  },
  withCredentials: true // 关键：允许请求携带Cookie
})

export const signIn = async payload => {
  try {
    const { data } = await api.post('s-i', payload)
    return data
  } catch (e) {
    return e.response.data
  }
}

4. 完善后端的Cookie配置 #

当前的Cookie配置缺少几个关键参数，可能导致浏览器拒绝保存：

return res
  .status(200)
  .cookie("refreshToken", JSON.stringify(refreshToken), {
    httpOnly: true,
    secure: process.env.NODE_ENV === "production", // 生产环境开启（仅HTTPS生效）
    sameSite: 'lax', // 平衡安全性和可用性，避免跨站问题
    maxAge: 7 * 24 * 60 * 60 * 1000, // 设置过期时间，比如7天
    domain: process.env.NODE_ENV === "development" ? 'localhost' : '你的生产域名' // 确保Cookie域名匹配
  })
  .json({ accessToken, reopening: reopening ? client.username : null })

关键说明： #

• secure: true仅在HTTPS环境下生效，开发环境设为false即可。
• sameSite设为lax是安全的默认值，既允许正常跳转携带Cookie，又能防范CSRF攻击。
• domain必须和前端服务器的域名一致，开发环境用localhost即可。

完成以上配置后，浏览器就能正常保存httpOnly的Refresh Token Cookie了。

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