Angular传JSON到Flask WebService返回NONE 如何正确获取JSON对象

核心错误点 #

• GET请求无请求体：request.get_json()仅能解析HTTP请求体中的JSON数据，GET请求本身没有请求体，必然返回空值
• URL路径参数不支持传递JSON：你定义的路由路径占位符<parameters>只会被解析为普通字符串，无法自动转换为JSON对象
• 缺少正确的请求头配置：即使使用POST请求，若前端未声明Content-Type: application/json，Flask也不会将请求体解析为JSON格式

修复步骤 #

1. 后端Flask接口改造 #

将接口改为POST请求，移除路径参数，直接从请求体读取JSON：

from flask import Flask, request, jsonify
# 如需解决跨域可安装flask-cors：pip install flask-cors
from flask_cors import CORS

app = Flask(__name__)
CORS(app) # 允许跨域请求，按需开启

@app.route("/insSpecifications", methods=['POST'] )
def insSpecifications():
    parameters = request.get_json()
    print(parameters) # 可正常输出完整JSON对象
    return jsonify({"code": 200, "msg": "success", "data": parameters})

2. 前端Angular请求逻辑改造 #

修改startWebServiceFor方法，发送POST请求并配置正确的请求头，直接传递JS对象作为请求体：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable({providedIn: 'root'})
export class SSProviderService {
  private baseUrl = '你的Flask服务基础地址';
  constructor(private http: HttpClient) { }

  startWebServiceFor(params: any) {
    const headers = new HttpHeaders({
      'Content-Type': 'application/json'
    });
    return this.http.post(`${this.baseUrl}/insSpecifications`, params, { headers }).subscribe(res => {
      console.log('后端响应：', res);
    });
  }
}

补充说明 #

如果必须使用GET请求传递参数（不推荐，存在长度限制、编码异常等问题），可将JSON序列化为字符串后拼接到URL查询参数中，后端通过request.args.get('parameters')获取后手动调用json.loads()解析即可。

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