Django API返回的Token Header无法被前端Fetch获取问题

问题根源 #

跨域请求场景中，浏览器的CORS安全策略默认只允许前端读取标准响应头（如Content-Type、Cache-Control等）。自定义的token响应头必须由后端显式声明允许暴露，否则前端无法获取到对应值。

解决方案 #

1. 视图函数手动添加暴露头

直接修改Django视图，在返回响应前添加Access-Control-Expose-Headers头，指定要开放的自定义字段：

@api_view(['POST'])
@csrf_exempt
def Create_new_doc(request):
    code = json.loads(request.body)
    code = code['code']

    characters = string.ascii_letters + string.digits
    token = ''.join(random.choice(characters) for _ in range(20))

    generate_qr_code.generate_qr(token)

    image_path = f"/files/qr_{token}.jpg"
    image_file = open(image_path, 'rb')

    response = FileResponse(image_file, content_type='image/jpeg')

    response['token'] = token
    # 新增此行：告知浏览器允许前端读取token头
    response['Access-Control-Expose-Headers'] = 'token'
    response.status_code = 200

    return response

2. （推荐）用django-cors-headers统一配置

如果项目已引入django-cors-headers库，可在全局配置中统一设置，避免重复编写代码：

# settings.py
INSTALLED_APPS = [
    # ... 其他已安装应用
    'corsheaders',
]

MIDDLEWARE = [
    # 确保该中间件排在CommonMiddleware之前
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    # ... 其他中间件
]

# 允许的前端跨域源（根据实际部署地址调整）
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
    "http://127.0.0.1:3000",
]

# 全局暴露自定义响应头
CORS_EXPOSE_HEADERS = ['token']

额外说明 #

• 确认请求属于跨域场景：比如前端运行在localhost:3000，后端在127.0.0.1:8000，域名/端口不一致即触发跨域规则。
• 前端代码无需修改，后端配置生效后，response.headers.get('token')即可正常获取到Token值。

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