Flask与Bad Request问题：Angular请求API返回400错误

看起来你遇到的是典型的协议不匹配导致的HTTP请求解析错误，从错误日志里的乱码和Bad request version提示就能看出来——你的Angular应用发送的请求协议（HTTP/HTTPS）和后端服务器支持的协议不兼容，导致服务器把请求数据当成了无效的HTTP版本来解析，才出现了这些乱码错误。

下面是具体的排查和解决步骤：

• 检查Angular请求的URL协议
  确认你在Angular代码里调用API的URL是用http://还是https://：

  • 如果你的后端服务器（比如本地测试用的Python简单服务器）只支持HTTP，那Angular绝对不能发HTTPS请求，把URL里的https改成http即可。
  • 示例修正：把this.http.get('https://localhost:8000/game-data')改为this.http.get('http://localhost:8000/game-data')

• 确认后端服务器的协议支持
  很多轻量测试服务器（比如Python自带的SimpleHTTPServer、Flask默认开发服务器）默认只支持HTTP，无法处理HTTPS请求。如果你的Angular应用强制发HTTPS请求，服务器会把HTTPS的握手数据当成错误的HTTP请求来解析，就会出现你日志里的乱码和版本错误。

  • 如果需要HTTPS支持，得给后端配置SSL证书：
    比如Flask可以这样启动HTTPS服务器：

    from flask import Flask
    app = Flask(__name__)
    
    # 假设你已经生成了cert.pem和key.pem证书文件
    if __name__ == '__main__':
        app.run(ssl_context=('cert.pem', 'key.pem'))
    

• 验证请求头和编码配置
  确保Angular请求的Content-Type头设置正确，避免编码问题导致的解析错误：

  import { HttpClient, HttpHeaders } from '@angular/common/http';
  
  // 配置正确的请求头
  const httpOptions = {
    headers: new HttpHeaders({
      'Content-Type':  'application/json',
      'Accept': 'application/json'
    })
  };
  
  // 发送请求
  this.http.post('http://your-server-url/api', gameData, httpOptions)
    .subscribe(
      response => console.log('Success:', response),
      error => console.error('Error:', error)
    );
  

• 用工具测试基础连接
  先用curl或者Postman直接请求后端API，排除后端本身的问题：

  curl http://localhost:8000/api
  

  如果这个请求能正常返回JSON数据，那问题肯定出在Angular的请求配置上，重点检查协议和请求头即可。

内容的提问来源于stack exchange，提问作者Lars Erhardt