Azure App Service上Express.js后端无法向SvelteKit前端设置Cookie

排查与修复步骤 #

1. 补全Express的CORS凭证配置 #

确保CORS配置不仅允许前端域名，还开启凭证支持——这是跨域场景下Cookie生效的前提：

const cors = require('cors');
app.use(cors({
  origin: 'https://abcfrontend.azurewebsites.net',
  credentials: true // 必须开启，否则浏览器拒绝处理Cookie
}));

2. 调整Cookie的Domain属性设置 #

避免使用泛域名，直接指定后端的完整域名：

res.cookie('your-cookie-key', 'cookie-value', {
  secure: true,
  sameSite: 'None',
  domain: 'abcbackend.azurewebsites.net',
  httpOnly: false, // 若需前端JS读取则设为false，仅后端使用可设为true
  maxAge: 86400000 // 示例：24小时有效期
});

注：如果Cookie是httpOnly: true，前端无法通过JS直接读取，但会自动携带在后续请求中，需到浏览器Application面板的Cookie列表中查看是否存在。

3. 配置Express信任Azure反向代理 #

Azure App Service的反向代理会修改请求头，需让Express信任代理以确保Cookie的Secure属性正常生效：

app.set('trust proxy', 1); // 信任Azure的代理服务器

同时检查Azure Portal中后端App Service的「配置→常规设置」，确保ARR Affinity处于开启状态（默认开启，多实例部署时保证请求路由到同一实例）。

4. 确保前端请求携带凭证 #

在SvelteKit的请求中必须显式设置credentials: 'include'，否则浏览器不会发送或保存Cookie：

// 示例：组件内的fetch请求
const res = await fetch('https://abcbackend.azurewebsites.net/api/set-cookie', {
  method: 'POST',
  credentials: 'include', // 关键配置
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ payload: 'test' })
});

5. 排查浏览器第三方Cookie限制 #

Chrome、Safari等浏览器默认限制第三方Cookie，即使配置了SameSite: None和Secure，隐私模式下仍可能被拦截：

• 测试时暂时关闭浏览器隐私保护模式验证；
• 生产环境可考虑将前后端部署到同一域名的子路径下（如abc.azurewebsites.net/frontend和abc.azurewebsites.net/backend），彻底规避跨域Cookie问题。

6. 验证响应头的Set-Cookie字段 #

在浏览器开发者工具的Network面板中，查看后端返回的响应头，确认Set-Cookie字段存在且属性正确。如果字段存在但浏览器未保存，基本是浏览器安全策略限制导致。

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