localhost环境下httpOnly为false仍无法读取Cookie问题

问题核心 #

本地React部署在http://local.example.com，后端API为https://www.example.com/api，线上https://www.example.com可正常读取非httpOnly的username Cookie，但本地环境下：

• 浏览器开发者工具和后端都能看到Cookie
• 执行document.cookie返回空字符串，无法通过JS访问Cookie

关键原因 #

你后端设置了secure: true，虽然原生localhost不受secure属性限制，但自定义域名local.example.com会被浏览器判定为普通HTTP域名。secure: true要求Cookie仅能在HTTPS环境下被JavaScript访问，本地HTTP环境不满足这一条件，因此即使Cookie被存储，前端也无法读取。

可行解决办法 #

1. 本地前端启用HTTPS #

给本地React开发环境配置HTTPS，让地址变为https://local.example.com，符合secure: true的访问要求：

• 用mkcert生成自签名证书（避免浏览器安全警告）
• 修改package.json的启动脚本：

  "scripts": {
    "start": "HTTPS=true SSL_CRT_FILE=./cert.pem SSL_KEY_FILE=./key.pem react-scripts start"
  }
  

• 启动项目后，访问https://local.example.com即可读取Cookie

2. 后端根据环境动态配置Cookie属性 #

在Express中判断运行环境，开发环境（本地）关闭secure，并适配本地域名：

const isProduction = process.env.NODE_ENV === 'production';

res.cookie("username", username, {
  maxAge: 1000 * 60 * 60 * 2,
  httpOnly: false,
  secure: isProduction,
  domain: isProduction ? '.example.com' : 'local.example.com',
  sameSite: isProduction ? "None" : "Lax"
})

res.cookie("token", token, {
  maxAge: 1000 * 60 * 60 * 2,
  httpOnly: true,
  secure: isProduction,
  domain: isProduction ? '.example.com' : 'local.example.com',
  sameSite: isProduction ? "None" : "Lax"
})

3. 确保CORS配置正确 #

后端CORS必须允许credentials，且origin不能用通配符*，需明确指定本地和线上地址：

const cors = require('cors');

app.use(cors({
  origin: ['https://www.example.com', 'http://local.example.com', 'https://local.example.com'],
  credentials: true
}));

验证步骤 #

打开浏览器开发者工具的「Application」→「Cookies」面板，检查username Cookie的Secure属性：

• 如果本地是HTTP环境，该属性为true时，JS无法访问
• 按照上述方案调整后，该属性应与环境匹配（HTTP下为false，HTTPS下为true）

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