Flask应用返回的JSON响应无法被JavaScript正常获取打印如何解决

核心错误原因 #

• response.json()是异步方法，返回Promise对象，而非直接返回解析后的JSON数据，必须在后续的.then()回调中才能拿到解析完成的真实数据
• 冗余的XMLHttpRequest声明无实际作用，可以删除
• 若前端页面与Flask服务的域名、端口、协议不一致，会触发浏览器同源策略拦截，需要配置跨域资源共享（CORS）
• 直接将JSON对象赋值给innerHTML会显示为[object Object]，需要转成字符串或者取对应字段展示

修复后的前端JS代码 #

function myFunction() {
  const inputVal = document.getElementById("input_thing").value;
  const url = 'https://*****.****.**/doctorapi/' + inputVal;
  fetch(url)
    .then(response => {
      // 先判断请求是否成功
      if (!response.ok) {
        throw new Error('请求异常，状态码：' + response.status);
      }
      // 解析JSON，返回Promise给下一个then
      return response.json();
    })
    .then(data => {
      // 这里的data才是解析完成的JSON数据
      console.log(data);
      // 两种展示方式二选一：
      // 1. 直接展示完整JSON字符串
      document.getElementById('demo').innerHTML = JSON.stringify(data, null, 2);
      // 2. 取指定字段展示
      // document.getElementById('demo').innerHTML = `查询内容：${data.query}，返回结果：${data.medical_response}`;
    })
    .catch(error => {
      // 捕获请求或解析过程中的错误
      console.error('请求出错：', error);
      document.getElementById('demo').innerHTML = '请求失败：' + error.message;
    })
}

跨域问题修复（Flask端配置） #

如果确认是跨域导致的请求拦截，按以下步骤修改：

1. 先安装依赖：pip install flask-cors
2. 调整Flask代码：

from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)
# 开启全局跨域，生产环境可指定允许的域名，不要用*
CORS(app, supports_credentials=True)

@app.route('/doctorapi/<query>')
def next(query):
    respons = query_search(query)
    respons = str(respons)
    # 无需手动调用make_response，直接返回jsonify即可
    return jsonify({
        "medical_response": respons,
        "query": query
    })

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