vue 部分网络图片加载失败，控制台报错，http状态码403

最新推荐文章于 2024-07-16 09:23:29 发布
最新推荐文章于 2024-07-16 09:23:29 发布
阅读量2.9k 收藏 1
点赞数 2
文章标签： http 网络协议 网络
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/c327127960/article/details/128953780
版权
在Vue项目中，图片请求出现403错误可能是因为携带了非本站的referrer信息导致防盗链机制触发。通过设置meta标签的referrerpolicy为no-referrer，可以避免发送referrer信息，从而解决403问题。在index.html中添加<metaname=referrercontent=no-referrer/>&gt;即可。
摘要由CSDN通过智能技术生成

vue项目中有时候请求网络地址的图片http状态码会报403错误

原因:

1.http请求头中有一个referrer字段，用来表示发起http请求的源地址信息
在这里插入图片描述
2. 服务器端在拿到这个referrer值后判断请求是否来自本站

若不是则返回403，从而实现图片的防盗链。上面出现403就是因为，请求的是别人服务器上的资源，但把自己的referrer信息带过去了，被对方服务器拦截返回了403

解决办法:

在前端可以通过meta来设置referrer policy(来源策略)，referrer设置成no-referrer，发送请求不会带上referrer信息，对方服务器也就无法拦截了

在index.html中添加

<meta name="referrer" content="no-referrer" />
鸡汤辉
关注
vue图片加载失败时用默认图片替换的方法
10-16
在Vue.js应用中，处理图片加载失败的情况是常见的需求，特别是在提供用户界面时，确保即使图片资源出现问题，也能保持良好的用户体验。本篇文章将详细介绍如何在Vue中实现图片加载失败时用默认图片进行替换。 首先...
vue 图片显示问题 403报错
yunbabac的博客
09-14 1249
做项目时，遇到了一些图片显示问题 1，本地图片 src下assets文件下文件加载不出来 解决：使用require 2,网络图片，访问出现403 解决：在index.html文件中添加标签 <metaname="referrer"content="no-referrer"/> ...
Vue图片403报错处理（referrerpolicy=no-referrer）
weixin_45152848的博客
11-05 8728
富文本中录入了一些文字加第三方的图片，之后在结果页面显示录入的文字+图片，部分图片不能正常显示 <img src="xxxx.jpg" referrerPolicy="no-referrer" /> 网页在加载资源时，默认在请求头里会带有当前网址 如果服务端做了限制，非同源的网址或者非白名单中的网址不能访问，就会出现403 如果给链接加属性 referrerPolicy=“...
vue3代理注意事项 端口号以及接口403的问题CSRF Failed: Origin checking failed
最新发布
weixin_47454566的博客
07-16 366
vue3代理注意事项 端口号以及接口403的问题CSRF Failed: Origin checking failed
vue图片加载失败 空白页的解决方案@error函数
肥晨开发的学习之路
02-16 2288
img标签中有一个onerror事件。是当引用的src属性获取不到图片，或者网络错误导致无法正常显示src属性的图片时，显示的提示错误图片或者是可以代替的万能图片。vue项目中 img标签加载失败(404)方法，@error事件。@error就是onerror。也可以用于项目中空白页的研发。
关于vue加载图片403的问题
CoCoTea的博客
08-01 1675
由于使用的是其它网站的图片资源，直接引用路径的话报错403，但是在浏览器可以正常显示 解决办法如下：将标签加上如下代码 // nuxtjs可以在 nuxt.config.js下添加 { name: 'referrer', content: 'no-referrer' } // HTML下直接在标签里面添加 <meta data-n-head="ssr" name="referrer" content="no-referrer"> 文章转载自b.vjwss.top ...
vue获取数据图片报403如何解决
xzj0197的博客
02-19 2668
GET https://img3.doubanio.com/view/note/sqs/public/p50659330.jpg 403 这是因为请求网络上的图片有时需要加上专门的缓存地址 https://images.weserv.nl/?url= <div class="right"><img :src="item.target.cover_url" alt=""></div> 这是没加缓存地址的会报403错误 <div class="rig...
vue项目中请求网络接口返回的图片url报错403解决方法
JackieDYH的博客
11-25 4039
网络接口都是有请求限制的，特别是图片字段值是绝对路径的情况，请求的时候就会报错403 forbidden，这个时候应该使用缓存的方式拿到请求图片的地址进行缓存，只要在请求到的图片链接前面加上https://images.weserv.nl/?url=图片url即可（这是一个专门缓存图片的网址） getImages( _url ){ if( _url !== undefined ){ let _u = _url.substring( 7 ); ret...
vue实现图片加载完成前的loading组件方法
08-28
一个基本的 Vue 组件通常由三部分组成：模板（template）、脚本（script）和样式（style）。在这个例子中，我们将使用 Vue 的模板和脚本来实现图片加载前的 Loading 效果。 知识点二： props 传递参数 在 Vue 中，...
Vue动态加载图片在跨域时无法显示的问题及解决方法
10-15
综上所述，解决Vue动态加载图片在跨域环境下无法显示的问题，需要针对具体情况选择合适的解决方案。如果是开发环境中遇到的问题，配置vue.config.js中的代理转发是一种方便快捷的方法。如果是生产环境，应该采取更为...
基于vue 动态加载图片src的解决方法
08-28
基于vue 动态加载图片src的解决方法 一、 Vue 中的动态加载图片src问题 在 Vue 项目中，动态加载图片src是一个常见的问题。当我们使用 Vue 编写项目时，经常会遇到图片加载不出来的问题，特别是在使用 webpack ...
vue请求网络接口中图片报错403解决办法
Tonyhnv的博客
07-02 4492
网络接口都是有请求限制的，特别是图片字段值是绝对路径的情况，请求的时候就会报错403 forbidden。这个时候应该使用缓存的方式拿到请求图片的地址进行缓存，只要在请求到的图片链接前面加上即可（）.........
Vue图片加载错误、图片加载失败的处理
大家好，我是+V
11-04 1697
Vue图片加载错误、图片加载失败的处理 注意： onerror前面要用冒号 : 注意看logo定义的格式，符号不要写错了 <img :src="pic?pic:'../../assets/placeholder.png'" :onerror="errorImage" alt=""> <script> export default { data() { return { errorImage: 'this.src="'
vue中img使用网络地址src，https、http均显示不出图片，一行代码解决
热门推荐
weixin_43663775的博客
11-10 1万+
<!--vue中使用--> <img src="https://img.ivsky.com/img/tupian/pre/202004/18/hongchanhua-001.jpg" alt="" style="width: 100%;height: 300px"> <!--图片不显示--> 在public中的html中，header内加上: <meta name="referrer" content="no-referrer"> 即可，一种策略，原理
请求网络图片403解决方案——vue、普通网页、小程序
qq_63731091的博客
07-29 798
请求网络图片403解决方案
vue项目有部分网络图片加载失败，无法正常显示，提示403.
六碗铁biu_ 的博客
01-05 827
在index.html 添加以下内容： <meta name="referrer" content="no-referrer" />
4种https页面加载http资源报错时的解决方案
web前端开发
12-20 3649
来源 |https://www.fly63.com改https初看起来，其实就是一个域名指向的问题，也许咱们只要将http的请求，直接跳转到https地址去，那么也就完成了https的切...
vue2/vue3 阻止控制台报错 并用普通方式将报错信息打印在控制台上
weixin_45966674的博客
08-14 4283
主要的代码就是 VueApp获取挂载元素 然后改写errorHandler 系统报错 和 warnHandler 系统警告方法。可以看到 控制台并没有报错 只是输出了报错信息 这样的字符串 我们也可以直接传给服务器 存储报错信息。也是在vue节点中 重写errorHandler和 warnHandler 方法。只用console输出一下 警告或报错提示 便结束方法。vue3 在 main.js中编写代码。vue2 在 main.js中编写代码。...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值