【项目问题定位】前端请求不到资源报错ERR_CONTENT_LENGTH_MISMATCH的解决

问题简述

前端页面加载资源时,出现ERR_CONTENT_LENGTH_MISMATCH的报错情况。

问题背景

从昨天下午开始,我上测试环境测试就开始发现会偶发如下问题:

  • 1.打开主页面速度很慢
  • 2.客户查询界面样式丢失,像是没有请求到css文件
  • 3.界面打开后,图表界面不显示任何图表

问其他小伙伴是否有遇到类似问题,都说没有问题。
难道是我人品有问题?因为有其他事要忙,索性先不管了。
今天早上,测试姐姐说他那边也遇到了我昨天说的问题。那看来不是我人品问题。

问题定位

初始报错定位
  1. 打开开发者工具,控制台报错是 require echarts.js error. 第一反应是缺失了这个第三方的echart。
    此时另一个小伙伴说他没有问题。但我觉得可能是他本地有缓存的缘故,让他清下缓存再看看。清完后果然问题复现了。
    然后先去看了下页面引入echarts.js的地方
    在这里插入图片描述
    去服务器上查看,echarts.js并没有缺失。就很奇怪!
    在这里插入图片描述
好像是网络问题
  1. 又猜想难道,是因为引入的不是压缩的JS,文件太大,而网络不好,导致加载资源失败?
    为了验证我的猜想,我将代码改成了引入echarts.min.js
    在这里插入图片描述
    清缓存重新进入测试环境,发现ok了。看来的确是因为echarts.js过大导致加载失败?
    但是之前一直是ok的。。再说了除了这个问题,第一个问题和第二个问题还是会出现。
ERR_CONTENT_LENGTH_MISMATCH 200 是什么原因?
  1. 当我再次清除缓存刷新界面时,第一个主页面始终打不开的问题又出现了。此时去查看控制台报错如下:
    在这里插入图片描述
    ERR_CONTENT_LENGTH_MISMATCH 200
    这个报错百度了一下,原因有很多,比如磁盘满了、Nginx的问题等等。
原来是Nginx报错了

于是先问了大家最近是否有对环境nginx做变更?
了解到的确昨天修改了Nginx的配置文件,所以取了一下Nginx的error.log,如下:
在这里插入图片描述
日志的报错提示很明显,Permission denied,Nginx在访问临时目录/usr/local/nginx/proxy_temp下文件时没有权限导致访问失败。

为何没有权限?

先查看下该临时目录的所有者,是nobody,而Ngnix的使用者是zoms
在这里插入图片描述
所以先试着使用chown命令修改所有者为zoms -R zoms:zoms ./proxy_temp
然后重启,重启后还是报Permission denied。重新查看权限,居然又变回了nobody

nobody的原因

为何修改权限并重启后,所有者又回变成nobody
找到了一个大佬的解释:
在这里插入图片描述
虽然我们并没有nginx -t,但是给了我一点启发。
我们是用root用户进来并修改配置文件的,然后用root重启的,然而root并不是Ngnix的所有者,所以重启后就强行修改了临时目录的权限!
在这里插入图片描述

问题解决

此时我们先停掉Ngnix,并用Ngnix的所有者zoms进入,修改临时目录权限为zoms,然后再用zooms重启Ngnix
重启好后,再进入测试环境,这时候就很快了,问题1,2,3都没有再出现了!

原因总结

所以根本原因是,Nginx的所有者是zooms,但是昨天用root用户去修改配置并重启了,重启后导致/usr/local/nginx/proxy_temp 的所有者变为了nobody
这时候Nginx在尝试访问/usr/local/nginx/proxy_temp下文件时,因为没有权限,导致了请求失败,进而导致了前端不能正确访问资源的问题ERR_CONTENT_LENGTH_MISMATCH
至于nginx为何要访问临时目录而不是直接去主机上加载,原因是访问的资源过大的话,Nginx会优先从缓存加载。

知识点

1.Nginx访问资源时,如果资源过大,会优先从缓存目录加载。
2.非Nginx所有者 重启Ngnix后会强制将临时目录所有者修改为nobody。所以一定要用Ngnix所有者去重启Ngnix
3.对于使用负载均衡的项目,如何定位访问不到资源的问题处于Ngnix
可以绕过Ngnix,直接访问目标主机上的资源,如果能快速访问到,那就说明服务器没问题,只能是因为Ngnix的某些问题导致访问失败了。进而可以查看Ngnixerror.log,进一步明确原因。

  • 50
    点赞
  • 46
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 52
    评论
前端项目启动报错ERR_OSSL_EVP_UNSUPPORTED是由于Node版本的问题引起的。根据引用中提供的信息,当Node版本号大于等于17.x时,本地运行npm run启动项目会出现该错误。解决这个问题的方法是修改环境变量,具体的步骤如下: 1. 打开终端或命令行界面。 2. 输入以下命令来手动修改环境变量: export NODE_OPTIONS=--openssl-legacy-provider 这个命令会将NODE_OPTIONS设置为--openssl-legacy-provider,从而解决该错误。 3. 重新运行npm run启动项目,应该不再出现ERR_OSSL_EVP_UNSUPPORTED错误。 另外,根据引用提供的信息,如果上述方法没有解决问题,你可以查看压缩包内的"报错修复指南AFTER888H.MD"文件,里面可能有更多的解决方案可供参考。 希望这些信息能帮助你解决前端项目启动报错ERR_OSSL_EVP_UNSUPPORTED的问题。如果还有其他疑问,请随时提问。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [【前端笔记】本地运行cli项目报错ERR_OSSL_EVP_UNSUPPORTED](https://blog.csdn.net/qq_43398736/article/details/131919865)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [vue3高德JSAPI官网DEMO完美修复版](https://download.csdn.net/download/hehu158/87680780)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 52
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

伯子南

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值