fetch响应解析报Unexpected End of Input错误排查求助

问题根源 #

你前端fetch配置中设置的mode: "no-cors"是导致无法获取响应内容的直接原因。

no-cors是浏览器针对跨域请求提供的特殊模式，仅适用于Service Worker缓存、静态资源预加载等不需要读取响应内容的场景。开启该模式后，浏览器会强制限制JavaScript侧读取响应的所有内容、修改大部分自定义请求头，哪怕服务端已经配置了Access-Control-Allow-Origin: *允许跨域也无法绕过这个限制。

你观察到的「请求成功但Response无内容」现象完全符合该模式的表现：浏览器已经正常发送请求、服务端也返回了响应，但浏览器主动对JS隐藏了响应内容，所以你无法调用json()方法解析返回结果。

解决方法 #

直接删除前端fetch配置中的mode: "no-cors"一行即可，使用默认的cors模式就能正常读取响应内容：

async function getAirportInfo(){
    let icao = document.getElementById('icao').value
    var data = await fetch(airportfeed + icao, {
        method: "GET", 
        headers: {
            'Content-Type': 'application/json'
        }
    });
    let response = await data.json()
    console.log(response)
    document.getElementById("airportname").value = response.name
}

你服务端已经正确配置了跨域允许头，不需要额外修改服务端代码。

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