F12 报错 net::ERR_CONTENT_LENGTH_MISMATCH 或者请求报错 Content-length 不同问题处理

近期碰到一个接口调用前端一直渲染不了数据的问题,经过定位发现是返回结果中少了右括号,怀疑可能是数据json转化有问题,具体是哪个字符通过排除法发现是中间有一个BigDecimal对象,前端接收的是一个科学计数法,可能造成了解析问题。最终通过增加FastJsonConfig 配置解决,解决的思路是其中的BigDecimal不做科学计数法转化。


import com.alibaba.fastjson.serializer.SerializerFeature;
import com.alibaba.fastjson.support.config.FastJsonConfig;
import com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.converter.HttpMessageConverter;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

import java.util.ArrayList;
import java.util.List;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Bean
    public FastJsonHttpMessageConverter fastJsonHttpMessageConverter() {
        FastJsonHttpMessageConverter converter = new FastJsonHttpMessageConverter();
        FastJsonConfig config = new FastJsonConfig();
        config.setSerializerFeatures(SerializerFeature.WriteBigDecimalAsPlain);
        converter.setFastJsonConfig(config);
        return converter;
    }

    @Override
    public void configureMessageConverters(List<HttpMessageConverter<?>> converters) {
        converters.add(fastJsonHttpMessageConverter());
    }
}

上述方法也可以处理因为BigDecimal对象转成科学计数法导致的 Content-length 对应不上,而被前端主动断开连接的问题。

### 图片加载错误 `net::ERR_CONTENT_LENGTH_MISMATCH` 的原因分析 当浏览器尝试加载图片资源时,如果返回的状态码为 `206 Partial Content` 并伴随错误提示 `net::ERR_CONTENT_LENGTH_MISMATCH`,这通常表明服务器响应的内容长度与实际传输的数据不匹配[^1]。以下是可能的原因及其解决方案: #### 可能原因 1. **网络中断或不稳定** 如果在网络传输过程中发生断开或其他异常情况,可能导致部分数据丢失,从而引发该问题。 2. **缓存机制冲突** 浏览器可能会基于 HTTP 缓存策略请求部分内容(Range Requests),而某些服务器配置不当会误处理这些请求,导致内容长度不符。 3. **Web Server 配置问题** Web 服务器(如 Nginx 或 Apache)可能存在未正确设置 Range 请求支持的情况,或者文件被截断[^2]。 4. **CDN 性能问题** 使用 CDN 加速的情况下,CDN 节点可能出现性能瓶颈或配置错误,影响静态资源的正常分发。 --- ### 解决方案 #### 方法一:优化 Web 服务器配置 对于使用 Nginx 的场景,可以调整其配置以更好地支持范围请求(Range Requests)。例如,在 Nginx 中启用以下选项: ```nginx http { ... proxy_buffering off; } ``` 此配置可防止代理缓冲区过早关闭连接而导致的部分内容缺失[^3]。 #### 方法二:禁用 Range 请求 如果确认问题是由于 Range 请求引起的,则可以通过修改 `.htaccess` 文件来禁用它(适用于 Apache 环境): ```apache <IfModule mod_headers.c> Header unset Accept-Ranges </IfModule> ``` #### 方法三:检查并修复源文件 确保上传到生产环境中的图片文件本身没有损坏。可以在本地验证文件完整性后再部署至线上服务。 #### 方法四:更新客户端代码逻辑 前端开发人员应考虑增加重试机制以及更健壮的错误捕获功能。比如通过 JavaScript 实现如下增强型图像加载函数: ```javascript function loadImage(src, callback) { const img = new Image(); let retries = 3; function attemptLoad() { img.onload = () => callback(null, img); img.onerror = (err) => { if (--retries > 0) { console.warn('Retrying image load...'); setTimeout(attemptLoad, 500); // 延迟半秒后重新尝试 } else { callback(err, null); } }; img.src = src; // 设置新的src属性触发加载过程 } attemptLoad(); // 初次调用 } // Usage Example: loadImage('/path/to/image.jpg', (error, result) => { if (!error && result instanceof HTMLImageElement) { document.body.appendChild(result); } else { console.error('Failed to load the image:', error); } }); ``` 上述方法能够有效减少因短暂性网络波动带来的失败风险[^4]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值