博客


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
  

欢迎访问：

天问博客