如何在Flask中处理React Native发起的Basic HTTP认证请求

核心问题原因 #

你遇到的header为空问题本质是两个基础错误导致的：

• 前端请求方法为POST，但Flask视图中仅实现了get方法，请求无法进入你写的处理逻辑，返回的是Flask默认的方法不允许响应，不是你get方法中返回的header内容
• 跨域场景下带Authorization头的请求会先发OPTIONS预检请求，你没有对预检请求做处理，导致跨域配置不生效，头信息被拦截

修复步骤 #

1. 修正请求方法匹配 #

根据你的业务选择对应方案：

• 方案一：将前端fetch的method改为GET
• 方案二：在Flask的log_in类中实现post方法处理请求

2. 补全CORS配置 #

允许Authorization头跨域传输，同时处理OPTIONS预检请求

3. 正确解析Basic认证信息 #

Flask已经内置了Basic Auth的解析逻辑，无需手动拆分Authorization头，直接调用request.authorization即可获取解析后的账号密码

完整可运行代码示例 #

from flask import request
from flask_restful import Resource
from flask_cors import cross_origin

@api.route('/log_in/', methods = ['GET', 'POST', 'OPTIONS'])
class log_in(Resource):
    # 处理预检请求，允许Authorization头跨域
    @cross_origin(origin='*', headers=['Content-Type', 'Authorization'])
    def options(self):
        return {}, 200
    
    # 对应前端POST请求
    def post(self):
        # 获取解析后的Basic认证信息
        auth = request.authorization
        if not auth:
            return {"msg": "未携带认证信息"}, 401
        # 取出账号密码做校验
        email = auth.username
        password = auth.password
        # 此处添加你的账号密码校验逻辑
        # 测试可直接返回headers确认信息正确
        return {
            "headers": dict(request.headers),
            "login_email": email
        }, 200

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