Angular向Flask后端发送POST请求无法传递数据问题排查

你的问题核心是前后端数据格式不匹配：前端发送的是JSON格式请求体，但后端用了只处理表单编码数据的request.form，导致接收为空。

解决步骤： #

1. 后端Flask代码修改

把接收数据的方式换成request.get_json()，它专门用来解析application/json格式的请求体：

@app.route('/upload', methods=['POST'])
def upload_data():
    print(request.method)              # POST
    # 使用get_json()解析JSON数据，force=True可强制解析（即使请求头没正确设置也能尝试解析）
    data = request.get_json(force=True)
    print(data)                        # 现在能拿到前端传的JSON数据了
    ...

2. 前端Angular代码的细节修正

• HttpHeaders不可变问题：Angular的HttpHeaders是不可变对象，append方法不会修改原对象，需要重新赋值：

  // 正确写法1
  const headers = new HttpHeaders().append('Content-Type', 'application/json');
  // 正确写法2
  let headers = new HttpHeaders();
  headers = headers.append('Content-Type', 'application/json');
  

• 拼写错误修正：Observalbe应该是Observable，否则会出现类型错误；
• URL路径修正：xxxxx\upload里的反斜杠要改成正斜杠xxxxx/upload，避免路径解析错误。

修改后前后端就能正常传递JSON数据了。

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