Flask+Next.js JWT认证场景下CSRF Token请求头配置失败求助

1. 修复代码中的基础错误 #

你的现有代码存在两个致命问题：

• API请求URL格式错误：http: localhost:8080/api 缺少双斜杠，应改为 http://localhost:8080/api
• 获取CSRF Token的fetch未加await，导致请求头中传入的是Promise对象而非实际Token值

修正后的完整请求逻辑：

// 先正确获取CSRF Token，必须携带凭证以获取Cookie
const csrfRes = await fetch('http://localhost:8080/get-csrf-token', {
  credentials: 'include'
});
// 根据Flask返回格式调整，若返回JSON则用csrfRes.json().then(data => data.csrf_token)
const csrfToken = await csrfRes.text();

// 发起API请求时携带Cookie和CSRF Token
const res = await fetch('http://localhost:8080/api', {
  method: 'GET',
  headers: {
    'X-CSRFTOKEN': csrfToken
  },
  credentials: 'include' // 强制携带Cookie（JWT）到后端
});

2. 配置Flask后端的跨域与Cookie参数 #

浏览器同源策略会限制跨域Cookie传递，需在Flask中配置以下参数：

• 启用CORS并允许凭证：

from flask_cors import CORS

app = Flask(__name__)
# 替换为你的Next.js实际地址，生产环境避免用*
CORS(app, supports_credentials=True, origins=["http://localhost:3000"])

• 配置CSRF和Cookie跨域参数：

app.config.update(
    SECRET_KEY='your-production-secret-key',
    # 跨域场景下设为'None'需配合HTTPS，开发环境用'Lax'即可
    SESSION_COOKIE_SAMESITE='Lax',
    SESSION_COOKIE_SECURE=False, # 生产环境HTTPS下改为True
    WTF_CSRF_ENABLED=True
)

• 确保get-csrf-token路由正确返回Token：

from flask_wtf.csrf import generate_csrf

@app.route('/get-csrf-token')
def get_csrf_token():
    return generate_csrf()

3. 浏览器端验证 #

打开开发者工具（F12）确认：

• Application标签：Cookie列表中存在JWT和CSRF相关Cookie
• Network标签：API请求的Request Headers包含Cookie（携带JWT）和X-CSRFTOKEN（正确Token值）

内容的提问来源于stack exchange，提问作者Cynthia Chioma Anosike