Nginx学习与实战 · 解决net::ERR_CONTENT_LENGTH

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

Nginx 206 (Partial Content)

原因

项目打包后有些文件比较大，例如这里的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 相关推荐

欢迎访问：天问博客

Tiven

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

原因

解决方案

Nginx 相关推荐