React JS调用Flask后端接口解析JSON出现undefined问题求助

你的问题出在Flask接口的响应返回方式上：

问题原因 #

你直接用Response(response_body, ...)返回Python字典，但Flask的Response构造函数需要接收字符串/字节类型的响应体。直接传入字典时，Python会将其转换为带单引号的字符串（比如"{'test123': '123', ...}"），这不符合JSON的语法规范（JSON要求键值对用双引号）。axios接收到这种非法JSON后，无法正确解析为JavaScript对象，导致response.data不是预期的结构，所以response.data.about输出undefined。

修复方案 #

有两种简单的修复方式：

方案1：使用Flask的jsonify函数

jsonify会自动将Python字典序列化为合法的JSON字符串，并设置正确的Content-Type: application/json响应头：

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/profile')
def test():
    response_body = {
        "test123": "123",
        "name": "Owen!",
        "about": "about!"
    }
    print(f"response is {response_body}")
    return jsonify(response_body), 200

方案2：直接返回字典（Flask 2.0+支持）

Flask 2.0及以上版本支持直接返回Python字典，框架会自动完成JSON序列化和响应头设置：

from flask import Flask

app = Flask(__name__)

@app.route('/profile')
def test():
    response_body = {
        "test123": "123",
        "name": "Owen!",
        "about": "about!"
    }
    print(f"response is {response_body}")
    return response_body, 200

验证建议 #

修复后可以打开浏览器开发者工具的Network面板，查看/profile接口的返回内容，确认是标准的双引号JSON格式，同时检查响应头的Content-Type是否为application/json。

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