Nginx配置文件错误导致图片资源404
背景
前段时间跟着视频学习了一下Django框架,搭了一个博客站点(Vue+Django前后端分离,阿里云ESC部署(Ubuntu 18.0),Nginx代理服务器),代码本地环境测试无误后就更改ajax请求地址为部署站点项目地址,但是前后端代码部署到阿里云以后,所有功能都ok,就是图片资源加载不出来,如下图:
期望的效果应该如下图,能正确显示图片:
分析原因
首先肯定是自查代码了,但是反复查看以及本地调试均无问题,后端也设置了跨域允许,于是最后将原因范围锁定在nginx服务器配置上。
通过控制台查看信息:
给出的404报错信息,通过图片的路径直接在浏览器中国访问也是404
但是在Nginx配置文件中给图片资源所在的文件夹加上
autoindex on;
在浏览器中是可以看到图片资源的,如下:
这说明资源是没问题的,并且之前也单独去服务器上的通过桌面去查看了文件,存在且可以查看。
查询了很多文章,给出了很多解决办法但都无法解决,正打算放弃了但谁知柳暗花明又一村。
上图原文链接:https://blog.geekdt.com/1330.html
解决方法
正如上图中所说,一些配置nginx脚本会自动加上一个页面资源缓存配置,用来优化体验,但如果我们在配置路径的时候重定向了本地目录位置来访问资源就会和脚本自动加上的缓存配置冲突,因此需要将其注释掉。而博主正是通过宝塔部署的站点,nginx配置文件中就会加上缓存配置,将其注释掉,果然博客站点访问就没有问题了(博主这里只是图片资源重定向到了本地的其他目录因此只需注释图片缓存配置,如果是js或者css文件也重定向了服务器本地目录就也要一并注释,不过这一段配置只要知道了什么意思完全可以根据实际情况自行设置)。
最后,我的博客站点就可以正常使用了。