Nginx学习与实战 · 解决net::ERR_CONTENT_LENGTH_MISMATCH 206问题

Vue项目引入了d3.js，在打包部署到nginx静态服务后，页面不能正常展示，F12打开控制台，发现报了几个net::ERR_CONTENT_LENGTH_MISMATCH 206 (Partial Content)错误。第一次遇到Status Code为206的问题，所以本文记录一下。

原因

• 项目打包后有些文件比较大，例如这里的d3.min.js有140kb，还有chunk-vendors.js文件有1.2Mb。
• 使用Nginx部署静态文件，配置了反向代理服务，而代理服务器的响应内容缓存区默认比较小，导致部分文件出现加载不全的问题。

解决方案

• 增加缓存大小
• 增加nginx的代理缓存区

在nginx.conf中http里面加入三行配置，如下：

#user  nobody;
worker_processes  1;

events {
  worker_connections  1024;
}

http {

  sendfile        on;
  #tcp_nopush     on;
    
  keepalive_timeout  65;
    
  # 增加配置 start
  proxy_buffer_size 128k;
  proxy_buffers   32 128k;
  proxy_busy_buffers_size 128k;
  # 增加配置 end
    
  #gzip  on;  
  
  server {
    # ...
    # ...
  }	
  
# ...
}

• 保存成功后，重启Nginx：

nginx -t

nginx -s reload

再次刷新页面发现页面可以正常展示了，没有了206的错误，问题解决。

耐思^_

Nginx 相关推荐

• Nginx学习与实战 · 配置HTTP2
• Nginx学习与实战 · 解决SPA单页面应用CDN缓存问题
• Nginx学习与实战 · 解决net::ERR_CONTENT_LENGTH_MISMATCH 206问题
• Nginx warn：conflicting server name ‘127.0.0.1’ on 0.0.0.0:8010, ignored
• Nginx反向代理WebSocket服务连接报错：WebSocket connection to ‘wss://xxx/xxx’ failed

欢迎访问：天问博客