尝试从客户端登录到后端烧瓶 api 时出现 401 UNAUTHORIZED 状态

Posted 2023-02-27

【中文标题】尝试从客户端登录到后端烧瓶 api 时出现 401 UNAUTHORIZED 状态

【英文标题】：401 UNAUTHORIZED status when attempting login from client side to backend flask api

【发布时间】：2022-01-13 11:37:29

【问题描述】：

我正在尝试从我用 Angular 开发的网站登录到后端烧瓶 API，后端使用 bcrypt 进行编码，使用 pymongo 与 MongoDB 交互。在邮递员中，登录端点工作正常，但是当尝试在客户端登录时，我收到 401：未经授权的错误。有人可以告诉我问题是什么/我哪里出错了吗？

客户端登录功能：

onLogin() 
  let postData = new FormData();
  postData.append('username', this.loginForm.get('username').value);
  postData.append('password', this.loginForm.get('password').value);

  this.http.post('http://localhost:5000/api/v1.0/login', postData)
  .subscribe((_response: any) => 

  console.log(this.loginForm.value);
  this.loginForm.reset();
)

后端的登录端点：

app = Flask(__name__)
CORS(app)

@app.route('/api/v1.0/login', methods=['POST'])
def login():

auth = request.authorization

if auth:
    user = users.find_one('username': auth.username)
    if user is not None:
        if bcrypt.checkpw(bytes(auth.password, 'utf-8'),
                      user["password"]):  
            token = jwt.encode( \
                'user' : auth.username,
                 'admin': user["admin"],
                'exp' : datetime.datetime.utcnow() + \
                datetime.timedelta(minutes=30)
             , app.config['SECRET_KEY'])
        return make_response(jsonify( \
            'token':token.decode('UTF-8')), 200)
    else:
        return make_response(jsonify( \
            'message':'Bad password'), 401)
else:
    return make_response(jsonify( \
    'message':'Bad username'), 401)

【问题讨论】：

您是否正确发送了用户名和密码？此外，您会收到 401 消息：用户名或密码错误？

你在邮递员中设置了什么标题？您在哪里设置要从 Angular 应用发送的用户名和密码？

【参考方案1】：

为了使用request.authorization，您需要在授权标头中发送凭据。在客户端试试这个：

onLogin() 
  const usn = this.loginForm.get('username').value;
  const pwd = this.loginForm.get('password').value;

  this.http.post('http://localhost:5000/api/v1.0/login', null, 
    headers: new HttpHeaders(
      Authorization: `Basic $btoa(`$usn:$pwd`)`
    )
  ).subscribe((_response: any) => 
    console.log(_response);
  );

作为旁注；可以使用atob() 轻松解码凭据，因此请确保您在不在本地主机上时使用安全连接（HTTPS）。

【讨论】：

感谢您的回复，不幸的是我现在收到一个 CORS 错误：从源 'localhost:4200' 访问 XMLHttpRequest 在 'localhost:5000/api/v1.0/login' 已被 CORS 策略阻止：请求标头字段授权是预检响应中的 Access-Control-Allow-Headers 不允许。

尝试在您的 CORS 配置中设置 supports_credentials=True。参考：flask-cors.readthedocs.io/en/latest/api.html，并允许localhost:4200 来源

仍然出现同样的错误。

默认情况下应该允许所有标题。您是否使用大写 A 指定 Authorisation-header？

另外，看看这个答案：***.com/a/38615675/9593504，你可以尝试在你的 http 配置中传入withCredentials: true