Flask项目中客户端无法存储JWT Token问题求助

首先明确：create_access_token仅负责生成JWT字符串，不会自动处理客户端的Token存储，Postman能正常访问是因为你手动添加了验证头，而浏览器端需要完成「存储Token+请求时携带Token」的完整流程，以下是具体解决方法：

方案1：LocalStorage存储 + 手动携带Authorization头 #

前端实现代码 #

// 1. 获取Token并存入LocalStorage
fetch('/')
  .then(res => res.json())
  .then(data => {
    localStorage.setItem('access_token', data.access_token);
  });

// 2. 请求需验证的接口时携带Token
fetch('/users', {
  method: 'GET',
  headers: {
    'Authorization': `Bearer ${localStorage.getItem('access_token')}`
  }
})
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));

后端跨域配置（前端后端分离时必须加） #

from flask_cors import CORS
app = Flask(__name__)
# 允许跨域携带凭证与自定义请求头
CORS(app, supports_credentials=True, expose_headers='Authorization')

方案2：后端自动写入HttpOnly Cookie（更安全） #

这种方式无需前端手动存储Token，浏览器会自动携带Cookie，同时避免XSS风险：

后端配置与代码修改 #

1. 配置JWT Cookie参数

from flask_jwt_extended import JWTManager
from datetime import timedelta

app.config['JWT_SECRET_KEY'] = 'your-secret-key-here'  # 替换为你的密钥
app.config['JWT_TOKEN_LOCATION'] = ['cookies']
app.config['JWT_ACCESS_COOKIE_PATH'] = '/'
app.config['JWT_ACCESS_TOKEN_EXPIRES'] = timedelta(hours=24)  # 设置Token有效期
app.config['JWT_COOKIE_CSRF_PROTECT'] = True  # 可选，开启CSRF保护

jwt = JWTManager(app)

2. 修改生成Token的接口，写入Cookie

from flask_jwt_extended import create_access_token, set_access_cookies, get_csrf_token

@app.route('/')
def hello_world():
    access_token = create_access_token(identity=1)
    response = jsonify(login_success=True)
    set_access_cookies(response, access_token)
    # 若开启CSRF保护，需返回CSRF Token给前端
    response.headers['X-CSRF-TOKEN'] = get_csrf_token(access_token)
    return response

3. 前端请求需携带凭证

fetch('/users', {
  method: 'GET',
  credentials: 'include'  // 必须添加，否则浏览器不会携带Cookie
})
.then(res => res.json())
.then(data => console.log(data))

跨域注意事项 #

CORS必须指定允许的前端域名（不能用*），同时开启凭证支持：

CORS(app, supports_credentials=True, origins=['http://your-frontend-domain.com'])

常见排查点 #

1. 检查请求头/ Cookie：打开浏览器开发者工具的Network面板，查看/users请求是否携带Authorization: Bearer <token>（方案1）或对应的Cookie（方案2）
2. Token过期：若Token过期也会返回类似错误，可通过JWT_ACCESS_TOKEN_EXPIRES延长有效期
3. CSRF验证失败：开启JWT_COOKIE_CSRF_PROTECT后，前端需在请求头中携带X-CSRF-TOKEN，值可从Cookie或后端返回的响应头中获取

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