ASP.NET MVC中Fetch API返回200状态码却无法访问响应数据

你当前的代码哪怕返回200状态码，本质上也没有输出可供Fetch正常解析的标准JSON响应，核心问题是后端Action写法不规范，前端缺少错误捕获逻辑，导致异常发生时无法看到具体报错信息。

后端代码修正 #

你现在使用的void + Response.Write(Json())是WebForm时代的旧写法，在ASP.NET MVC中会引发三个典型问题：

• 手动输出的内容不会自动附带application/json响应头，Fetch调用res.json()时会因为MIME类型不匹配触发解析错误
• Action返回void时，MVC视图引擎会在方法执行完成后尝试查找对应视图并输出HTML内容，和你手动写入的JSON混在一起，直接破坏JSON结构
• 手动调用Response.Write容易夹带管线流程产生的多余空白字符，导致JSON解析失败

正确的Action应该直接返回JsonResult类型，注意：ASP.NET MVC默认的JsonResult会拦截GET请求的JSON返回，必须显式放开权限，不然会直接返回500错误：

public JsonResult getlogic()
{
    var list = db.Locations.ToList();
    // AllowGet参数适配Fetch的GET请求，不加会触发请求拦截
    return Json(list, JsonRequestBehavior.AllowGet);
}

前端代码修正 #

你当前的前端代码没有做错误捕获，请求阶段、解析阶段出错时只会静默失败，看不到具体问题。修正后的完整代码：

$('#sendbtn').click(function () {
    fetch('/Accounts/getlogic')
        .then(res => {
            // 先校验请求状态，避免把错误页当成正常响应处理
            if (!res.ok) {
                throw new Error(`请求失败，状态码：${res.status}`)
            }
            return res.json()
        })
        .then(data => {
            // 这里拿到的data就是序列化后的地点列表数组，直接访问对象属性即可
            console.log('获取到的地点数据：', data)
            // 示例：遍历读取每个地点的属性
            // data.forEach(location => {
            //     console.log(location.Id, location.Name)
            // })
        })
        .catch(err => {
            // 捕获所有请求、解析阶段的错误，方便定位问题
            console.error('请求异常：', err)
        })
})

排查验证方法 #

• 修改完成后打开浏览器开发者工具的「网络」面板，找到getlogic请求，检查响应头的Content-Type是否为application/json，如果显示text/html说明后端写法还没有调整正确
• 查看响应的原始内容，确认没有HTML标签、多余空格等非JSON内容，如果看到以<开头的响应片段，说明存在视图引擎的残留输出
• 如果控制台报Unexpected token < in JSON at position 0错误，基本可以确认响应夹带了HTML内容，回到后端调整返回值即可解决

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