Azure Web App中Set-Cookie响应头丢失问题排查求助

可能的原因及对应解决办法 #

1. Azure静态Web App代理默认过滤Set-Cookie头 #

Azure静态Web App的API代理层（用于连接后端Web App的功能）默认会移除响应中的Set-Cookie头，除非显式配置允许传递该头。

解决办法：
在静态Web App的根目录创建staticwebapp.config.json文件，添加路由配置以允许Set-Cookie头透传：

{
  "routes": [
    {
      "route": "/api/*",
      "headers": {
        "Access-Control-Expose-Headers": "Set-Cookie"
      },
      "backend": {
        "url": "你的后端Web App完整地址"
      }
    }
  ]
}

确保该配置文件随前端代码一起部署到Azure静态Web App。

2. Cookie缺少Secure属性 #

Azure部署的服务默认使用HTTPS，浏览器要求HTTPS环境下设置的Cookie必须包含Secure属性，否则会被拦截；本地HTTP环境无此限制，因此本地功能正常。

解决办法：
修改后端设置Cookie的代码，添加Secure属性：

res.setHeader('Set-Cookie', `user-data=; Max-Age=0; path=/; domain=${BACKEND_DOMAIN}; Secure`);
res.end();

如果需要兼容本地HTTP调试，可根据环境动态判断：

const isProduction = process.env.NODE_ENV === 'production';
const secureAttr = isProduction ? '; Secure' : '';
res.setHeader('Set-Cookie', `user-data=; Max-Age=0; path=/; domain=${BACKEND_DOMAIN}${secureAttr}`);
res.end();

3. Domain属性配置不匹配 #

通过静态Web App代理访问后端时，前端域名是静态Web App的域名，若设置的domain=${BACKEND_DOMAIN}与前端域名不属于同一主域，代理或浏览器会判定该Cookie无效并拦截。

解决办法：

• 若静态Web App和后端Web App使用自定义的同一主域，可将domain设置为该主域；
• 直接移除domain属性，让浏览器自动使用当前请求的代理域名：

res.setHeader('Set-Cookie', `user-data=; Max-Age=0; path=/; Secure`);
res.end();

4. SameSite属性缺失 #

现代浏览器要求Cookie必须设置SameSite属性（可选值：Strict、Lax、None），生产环境下会严格校验，本地调试模式可能放宽限制。跨域场景下需设置为None，且必须配合Secure属性。

解决办法：
补充SameSite属性：

res.setHeader('Set-Cookie', `user-data=; Max-Age=0; path=/; domain=${BACKEND_DOMAIN}; Secure; SameSite=None`);
res.end();

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