网页加载报Uncaught SyntaxError JSON解析异常本地正常线上报错求助

问题根因 #

Uncaught SyntaxError: Unexpected end of JSON input 报错的核心原因是 JSON.parse() 接收到的字符串不是完整的合法JSON结构，和JS合并环节无关，属于线上环境和本地环境的差异导致的接口响应异常。 #

排查方案 #

• 优先检查跨域配置：本地调试时可能跨域限制被关闭、或者接口允许本地域名访问，线上页面域名和你接口的IP+端口域名不一致的话，浏览器会拦截响应内容，导致responseText为空或者不完整。确认线上接口的响应头Access-Control-Allow-Origin配置是否匹配你线上页面的域名。
• 加异常容错逻辑：现有代码没有做任何异常捕获，一旦响应异常会直接崩溃，修改对应代码段如下：

xmlhttp2.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        // 先判断响应内容是否为空
        if (!this.responseText || this.responseText.trim().length === 0) {
            console.error('接口返回空响应', this)
            return
        }
        let dataURL
        // 用try catch包裹parse逻辑
        try {
            dataURL = JSON.parse(this.responseText)
        } catch (e) {
            console.error('JSON解析失败，原始响应内容：', this.responseText, e)
            return
        }
        // 后续原有逻辑保持不变
        ...
    }
}

• 检查线上接口响应完整性：如果接口返回的数据量较大，线上服务器可能存在超时截断、输出异常提前结束的问题，比如JSON末尾缺少闭合的]]符号。可以在catch段打印完整的responseText，直接复制出来校验JSON格式是否合法。
• 检查响应头配置：确认线上接口返回的Content-Type是application/json，如果配置错误，部分CDN、代理服务会篡改或者截断响应内容，导致JSON结构不完整。

额外提示 #

你现有代码里取字段时存在大小写不匹配的问题：接口返回的字段是小写fecha、pm1、pm2、pm10，但代码里读取的是大写开头的o.Fecha、o.ValorMedicionPM10等字段，JSON解析成功后也会出现数据读取为undefined的问题，需要对应修改字段名。

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