JavaScript调用API出现Undefined错误，无法获取接口响应

针对你调用API时出现Undefined错误的问题，从代码和环境层面逐一排查，给出以下修复步骤：

一、核心代码问题修正 #

你的AJAX配置存在两处不合理设置，先调整代码：

function Get_Platforms() {
    $.ajax({
        type: "GET",
        url: "http://10.64.127.94:5000/api/get_platforms",
        dataType: 'json',
        // 跨域需要带凭证时才开启，否则注释掉
        // xhrFields: { withCredentials: true },
        success: function (data) {
            console.log('响应数据:', data);
            // 正确展示JSON内容，而非直接alert对象
            alert(JSON.stringify(data));
            // 若要直接显示平台列表，可替换为：
            // alert(data.final_result.join(', '));
        },
        error: function (xhr, status, error) {
            // 打印详细错误到控制台，方便排查
            console.error('请求失败详情:', xhr, status, error);
            alert(`状态码: ${xhr.status}, 错误类型: ${error}, 响应内容: ${xhr.responseText || '无'}`);
        }
    });
}

关键修正点： #

• 移除contentType设置：GET请求没有请求体，设置application/json会干扰后端解析逻辑，属于冗余且可能引发问题的配置。
• 删除错误的xhrFields: { cors: false }：jQuery的xhrFields不存在cors参数，跨域请求需后端配置CORS，或在需要带Cookie时设置withCredentials: true。
• 优化错误与响应展示：用console.log输出详细信息，避免alert截断或显示不完整；JSON.stringify(data)能正确展示JSON对象内容。

二、逐步排查潜在问题 #

1. 验证API本身是否正常 #

直接在浏览器地址栏访问http://10.64.127.94:5000/api/get_platforms，确认：

• 返回的是格式正确的JSON（如你提供的示例）
• 浏览器控制台没有CORS相关错误提示

2. 跨域问题排查 #

如果你的前端页面和API不在同一域名/端口下，浏览器会触发跨域拦截：

• 后端需配置CORS允许前端域名访问（以Flask框架为例）：

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
# 生产环境建议指定具体域名，而非允许所有
CORS(app, origins="http://你的前端域名:端口")

@app.route('/api/get_platforms')
def get_platforms():
    return {"final_result": ["THORIUM", "RADIUM", "URANIUM", "THALLIUM"]}

3. 检查jQuery是否正确引入 #

确认页面已正确加载jQuery库，否则$对象会是undefined，导致$.ajax调用失败。可在控制台输入$验证，若返回function则正常。

4. 检查响应格式与状态码 #

打开浏览器开发者工具的Network标签，查看请求的：

• 状态码：正常应为200
• 响应头：Content-Type需为application/json
• 响应内容：确认返回的JSON无语法错误

三、常见错误原因总结 #

• 跨域拦截：后端未配置CORS，浏览器阻断请求，导致xhr.responseText为undefined
• 冗余配置：GET请求设置contentType引发后端解析异常
• jQuery未引入：$对象不存在，函数执行报错
• 响应格式错误：API返回的JSON存在语法问题，jQuery无法解析

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