Next.js App Router：服务端组件JWT令牌授权问题

问题分析 #

客户端请求时，withCredentials: true会让浏览器自动携带HTTP-only Cookie，而Flask的@jwt_required如果配置了从Cookie提取令牌，就能通过授权。但服务端组件的请求是从Next.js服务器发起的，没有浏览器的Cookie上下文，withCredentials: true在这里无效，需要手动传递Cookie信息。

解决步骤 #

1. 确认Flask JWT的令牌获取方式 #

如果客户端靠withCredentials: true就能通过@jwt_required，说明你的Flask项目配置了从Cookie读取JWT令牌（比如Flask-JWT-Extended设置了JWT_TOKEN_LOCATION = ['cookies']）。这种情况下，服务端请求需要直接传递完整的Cookie头给Flask，而非将token放在Authorization头。

2. 修改Next.js服务端组件的请求代码 #

从next/headers获取Cookie后，拼接成标准的Cookie字符串，作为请求头传递给Flask：

async function getAllIntegrations() {
  const cookieStore = cookies();
  // 拼接所有Cookie为标准格式的字符串
  const cookieHeader = cookieStore.getAll()
    .map(cookie => `${cookie.name}=${cookie.value}`)
    .join('; ');

  try {
    const response = await axios.get('http://127.0.0.1:8000/integrations/', {
      headers: {
        Cookie: cookieHeader, // 传递完整Cookie头
      },
      // 移除withCredentials: true，服务端请求不需要这个浏览器专属配置
    });
    return response.data;
  } catch (error) {
    // 建议打印错误详情排查
    console.error('授权失败详情:', error.response?.data || error.message);
    throw new Error('Internal Server Error');
  }
}

3. 排查常见问题 #

• Cookie未正确获取：在服务端组件中打印cookieStore.getAll()，确认jwt_token存在且值正确。如果拿不到，检查Cookie的Path、Domain设置是否允许Next.js服务端访问。
• Flask CORS配置：确保Flask的CORS设置允许Next.js服务器的域名，并且开启了凭证支持：

  from flask_cors import CORS
  CORS(app, supports_credentials=True, origins=["http://localhost:3000"]) # 替换为你的Next.js域名
  

• 令牌格式问题：如果Flask同时支持Authorization头，确认Cookie中的jwt_token是纯令牌值（不带Bearer 前缀），再尝试用Authorization头传递：

  headers: {
    Authorization: `Bearer ${jwt_token}`,
  }
  

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