Vercel部署页面在Safari无法设置Cookie致登录401求助

以下是针对你遇到的问题的具体解决方案：

1. 修正Cookie参数的语法与配置 #

Safari对Cookie的参数格式和大小写要求更严格，你朋友的代码里max-age: 43200是错误的（应该用等号而非冒号），同时SameSite=None必须搭配Secure且首字母大写。建议使用以下标准格式：

res.setHeader('Set-Cookie', `AuthToken=${token}; HttpOnly; Max-Age=43200; SameSite=None; Secure; Path=/`)

• 移除手动设置的Domain参数：Vercel的xxx.vercel.app属于公共后缀列表，手动指定Domain可能导致Safari拒绝存储Cookie，让浏览器自动匹配当前域名即可。
• 不要同时设置Max-Age和expires，避免参数冲突，优先使用Max-Age。

2. 优化CORS配置与中间件顺序 #

你的代码中存在冗余的CORS设置，且中间件顺序可能影响Cookie传递：

• 移除app.set('Access-Control-Allow-Credentials', true)和app.set('Access-Control-Allow-Origin', true)，统一通过cors中间件配置：

const corsOptions = {
  origin: process.env.ORIGIN, // 确保线上环境设置为前端的完整HTTPS域名，如https://your-frontend.vercel.app
  credentials: true,
  optionsSuccessStatus: 200 // 兼容旧版浏览器的预请求
}

• 调整中间件顺序，确保cors在路由之前，且express.json()和cookieParser先执行：

config()
const app = express()

const mongoConnectionString = mongoDb.url
const localhost = process.env.ORIGIN

const corsOptions = {
  origin: localhost,
  credentials: true,
  optionsSuccessStatus: 200
}

mongoose.connect(mongoConnectionString, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
  useFindAndModify: false,
})

const database = mongoose.connection

database.on('error', (error) => {
  console.log(error)
})

database.once('connected', () => {
  console.log('Database Connected')
})

// 正确的中间件顺序
app.use(express.json())
app.use(cookieParser())
app.use(cors(corsOptions))

app.use(userAccountRouter)
app.use(authenticateToken)
app.use(apiRoute)

3. 确认Vercel环境配置 #

• 检查线上环境的ORIGIN环境变量：必须设置为前端的完整HTTPS域名，不能是localhost或通配符*，否则带credentials的CORS请求会被拒绝。
• 确保Vercel服务是HTTPS：SecureCookie仅在HTTPS环境下生效，Vercel默认提供HTTPS，但要确认没有强制HTTP的重定向规则。

4. 前端请求需携带Credentials #

确保前端发起请求时携带凭证：

• Axios：设置withCredentials: true
• Fetch：设置credentials: 'include'

5. 规避Safari智能跟踪保护（ITP） #

如果以上步骤无效，可能是Safari的ITP阻止了Cookie：

• 尝试将前端和后端部署在同一个二级域名下（如前端app.your-project.vercel.app，后端api.your-project.vercel.app），减少跨域跟踪风险。
• 避免在Cookie中使用可能被视为跟踪标识符的内容，保持Cookie用途明确（仅用于身份验证）。

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