Azure多App Service间Cookie共享配置问题咨询

完全可以通过配置让两个App Service共享同一域名（或主域名下的子域名），实现Cookie在前端上下文持久化，以下是两种可行方案：

方案一：主域名+子域名部署 #

1. 域名规划：注册一个主域名（如example.com），为前端分配子域名app.example.com，后端分配api.example.com。
2. 绑定域名到App Service：
   • 将两个子域名分别绑定到对应的Azure App Service实例，完成DNS解析配置。
   • 为每个子域名配置SSL证书（可使用Azure免费证书或自有证书），确保全站HTTPS访问。
3. Django后端配置：
   • 生成JWT Cookie时，将Domain属性设为主域名example.com（或.example.com兼容旧版浏览器）。
   • 开启Cookie的Secure、HttpOnly属性，同时将SameSite设为None（跨域场景必填，否则浏览器会拒绝Cookie）。
   • 配置CORS规则：设置CORS_ALLOW_CREDENTIALS = True，并将前端子域名https://app.example.com加入CORS_ALLOWED_ORIGINS列表。
4. Angular前端配置：
   • 发起后端请求时，添加withCredentials: true选项，确保浏览器携带Cookie。

方案二：Azure Front Door统一路由 #

1. 部署Front Door：创建Azure Front Door实例，将主域名（如example.com）绑定到Front Door。
2. 配置路由规则：
   • 设置规则，将example.com/app/*转发到前端App Service，example.com/api/*转发到后端App Service。
   • 为Front Door配置SSL证书，确保HTTPS访问。
3. Cookie简化设置：
   • 前端、后端请求均在同一主域名下，属于同源请求，后端设置Cookie时直接将Domain设为example.com即可，无需复杂跨域CORS配置。
   • 前端请求无需额外添加withCredentials，浏览器自动处理Cookie。

关键注意事项 #

• 必须使用HTTPS：Secure属性的Cookie仅在HTTPS环境生效，现代浏览器强制跨域Cookie要求HTTPS。
• 验证Cookie状态：通过浏览器开发者工具Application -> Cookies面板，检查Cookie是否成功设置到目标域名。
• SameSite属性：跨域场景下必须设为None，同时搭配Secure属性，否则浏览器会拦截Cookie。

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