浏览器访问图片提示Net::ERR_CONNECTION_RESET

最新推荐文章于 2024-09-19 15:23:49 发布

奔跑的大白啊

最新推荐文章于 2024-09-19 15:23:49 发布

阅读量9.3k

点赞数 1

分类专栏：【Nginx】文章标签： nginx 服务部署图片预览图片加载失败浏览器

本文链接：https://blog.csdn.net/zt15732625878/article/details/119514819

版权

【Nginx】专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言

小伙伴们，好久不见！今天记录一个前端页面中图片加载失败的问题及解决过程。

问题描述

业务系统中预览图片功能显示不完整或请求超时

前端使用框架: vue
在这里插入图片描述

查看浏览器的控制台和网络，看到的现象是请求的图片下载到原体积的一部分，请求就停止了（比如图片268kb,请求去下载图片到168kb，请求停止），部分图片请求超时，控制台提示信息：
Net::ERR_CONNECTION_RESET 200
在这里插入图片描述

问题排查

查看浏览器控制台的请求是否正常，请求图片相关的接口有无报错
查看网络是否不通畅，导致请求超时
查看被请求的图片是否存在，是否存在不完整的情况
查看Nginx请求日志，分析日志
查看本地/开发环境是否存在相同问题
查看Nginx代理设置，图片转发是否失败
查看服务器内存/存储空间占用情况

根据以上排查过程进行了排查确认，最终定位到生产环境nginx的问题，发现是nginx默认的缓存空间不足，导致系统刚开始运行图片预览功能正常，经过近几十次的连续点击预览图片后，缓存空间被占满了，再有请求过来，在浏览器预设的超时时间内无法很快地作出响应，导致图片出现一部分最终显示请求fail。

问题解决

修改相应的nginx配置如下(关注proxy_cache关键字相关配置 )：

user  root;
worker_processes  2;
events {
        worker_connections  1024;
}
http {
        include       mime.types;
        default_type  application/octet-stream;

         ##
         # Logging Settings
         ##


        log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

        access_log /var/log/nginx/access.log main;
        error_log /var/log/nginx/error.log warn;

       
        #添加proxy_cache模块 /data/nginx/cache 本地缓存路径 cache_dir别名
        proxy_cache_path /data/nginx/cache levels=1:2 keys_zone=cache_dir:10m inactive=1d max_size=1g;

        server {
                listen       80;
                location / {
                        root   /xx/static-dist;
                        index  index.html index.htm;
                }
                location /xx/api/
                {
                       
                        proxy_pass  http://backendIP:port/;
                        proxy_cache cache_dir;   #调用别名为cache_dir的这个缓存
                        proxy_cache_valid  200 302 2d;
                        proxy_cache_use_stale  error timeout invalid_header updating http_500 http_502 http_503 http_504;
                        client_max_body_size    1024m;
                }
        }
 }