127.0.0.1与localhost的Cookie差异及前端Cookie不显示问题排查

安全阿岳

2026-6-30

问题原因与解决方案

核心原因

Secure Cookie的浏览器差异化处理：你设置了secure:true，该属性要求Cookie仅能通过HTTPS传输。本地开发若使用HTTP（比如Vite默认的5173端口），浏览器对localhost有特殊豁免——现代浏览器会将localhost判定为「安全上下文」，允许HTTP环境下携带Secure Cookie；但127.0.0.1没有这个豁免，HTTP环境中浏览器会直接拒绝保存带secure:true的Cookie。
SameSite规则依赖Secure生效：sameSite:None的生效前提是Cookie开启secure属性。当127.0.0.1的HTTP环境不满足Secure要求时，SameSite配置会被浏览器忽略，Cookie无法存储。
Postman不受浏览器安全策略限制：API测试工具不遵循浏览器的Cookie安全规则，只要后端正确返回Cookie，无论用127.0.0.1还是localhost，都会正常存储和携带。

解决方法

开发环境临时关闭Secure属性：通过环境变量判断，仅在生产环境启用secure:true，示例代码：

// Express后端Cookie配置
res.cookie('auth-token', token, {
  httpOnly: true,
  path: '/',
  sameSite: process.env.NODE_ENV === 'production' ? 'None' : 'Lax',
  secure: process.env.NODE_ENV === 'production'
});

本地开发启用HTTPS：用mkcert生成自签名证书，给前端和后端配置HTTPS。比如Vite可在vite.config.js中开启：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import fs from 'fs';

export default defineConfig({
  plugins: [react()],
  server: {
    https: {
      key: fs.readFileSync('./localhost-key.pem'),
      cert: fs.readFileSync('./localhost.pem')
    }
  }
});

配置后，无论是127.0.0.1还是localhost，都能在HTTPS环境下正常存储Secure Cookie。