Azure App Service生产环境JWT Cookie属性变更问题排查

问题背景 #

• 前端部署在Vercel，后端部署在Azure App Service
• 本地环境中JWT Cookie的secure: true、sameSite: "None"设置正常，但部署到Azure后，sameSite被改为Strict，导致跨域请求时认证失败，无法访问/sidebarconversations等受保护路由

相关代码片段 #

生成JWT Cookie的代码 #

import jwt from "jsonwebtoken";

const generateToken = (res, userId) => {
  const token = jwt.sign({ userId }, process.env.JWT_SECRET, {
    expiresIn: "30d",
  });
  //sending back to frontend
  res.cookie("jwt", token, {
    httpOnly: true,
    secure: true,
    sameSite: "None",
    maxAge: 30 * 24 * 60 * 60, //30 days
  });
};

export default generateToken;

Express中间件配置 #

import express from "express";
import cors from "cors";
import dotenv from "dotenv";
import cookieParser from "cookie-parser";
import { app, server } from "./socket/socket.js";
import connectDB from "./config/db.js";
import { notFound, errorHandler } from "./middleware/errorMiddleware.js";
import authRoutes from "./routes/authRoutes.js";
import userRoutes from "./routes/userRoutes.js";
import messagesRoutes from "./routes/messagesRoutes.js";

dotenv.config({ path: "config/.env" });

const port = process.env.PORT || 3000;

app.use(cookieParser());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.use(
  cors({
    origin: process.env.FRONTEND_URL,
    methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
    credentials: true,
    allowedHeaders: ["Content-Type", "Authorization"],
  })
);

app.use("/api/users", authRoutes);
app.use("/api/messages", messagesRoutes);
app.use("/api/sidebarconversations", userRoutes);

app.get("/", (req, res) => {
  res.send("API is running...");
});

app.use(notFound);
app.use(errorHandler);

connectDB();

server.listen(port, () => {
  console.log(`Server running on port ${port}`);
  console.log("Frontend connection coming from:", process.env.FRONTEND_URL);
});

原因分析 #

Azure App Service默认启用ARR (Application Request Routing) 代理，该代理会对请求进行处理，其中包括自动调整Cookie的sameSite属性。当检测到跨域请求时，ARR的默认安全策略会将sameSite: None的Cookie强制修改为Strict，导致跨域场景下Cookie无法正常携带。

另外，Express应用若未正确识别Azure的代理环境，会导致secure属性的协议检测出现偏差，间接影响sameSite属性的生效逻辑。

解决方案 #

1. 配置Express信任代理 #

在Express初始化代码中添加信任代理的配置，让应用正确识别Azure的ARR代理，确保Cookie属性设置被正确传递：

// 在app.use(cookieParser())之前添加
app.set('trust proxy', 1);

该配置会让Express信任第一个代理服务器，正确获取请求的原始HTTPS协议，避免代理对Cookie属性的误修改。

2. 禁用Azure的Cookie SameSite自动修改 #

通过Azure门户修改应用服务配置，强制保留Cookie的sameSite设置：

• 登录Azure门户，进入目标App Service资源
• 导航至 配置 > 应用程序设置
• 添加新的应用设置：
  • 名称：WEBSITE_COOKIE_SAMESITE
  • 值：None
• 保存配置并重启App Service

3. 验证配置效果 #

部署修改后的代码和配置后，通过浏览器开发者工具的Application > Cookies面板，检查生产环境中JWT Cookie的sameSite是否为None、secure是否为true，同时测试跨域请求能否正常携带Cookie访问受保护路由。

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