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

这篇具有很好参考价值的文章主要介绍了vue 部分网络图片加载失败,控制台报错,http状态码403。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

原因:

1.http请求头中有一个referrer字段,用来表示发起http请求的源地址信息
vue加载图片403,http,网络协议,网络
2. 服务器端在拿到这个referrer值后判断请求是否来自本站

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

解决办法:

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

在index.html中添加文章来源地址https://www.toymoban.com/news/detail-629164.html

<meta name="referrer" content="no-referrer" />

到了这里,关于vue 部分网络图片加载失败,控制台报错,http状态码403的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 控制台输出vue实例

    控制台输出vue实例的两种方法: 在这里我想介绍一下在控制台输出vue实例的两种方法,我觉得其中一种不管是vue框架还是其他框架都是适用的, 我就不说是哪种方法了 大家都可以试一遍: 1、前后端分离的项目中,如果挂载的id名是app,我们可以在控制台中这么打印获取: 2、

    2024年02月10日
    浏览(51)
  • 【教程】教你搭建控制台链接区块链网络,如何搭建FISCO-BCOS控制台

    目录 前言 配置及使用控制台 第一步. 准备依赖 第二步. 启动并使用控制台 部署及调用测试HelloWorld合约 第一步. 编写HelloWorld合约 第二步. 部署HelloWorld合约 第三步. 调用HelloWorld合约 随着区块链的发展,目前国内也掀起了一阵区块链的热潮,无论是金融、信任、交易、溯源等

    2024年02月10日
    浏览(45)
  • 【网络编程】| 搭建控制台通信demo

    前边我们提到TCP协议是面向的连接的,在 通信时客户端与服务器端必须建立连接 。在网络通讯中,第一次主动发起通讯的程序被称作客户端(Client)程序,简称客户端,而在第一次通讯中等待连接的程序被称作服务器端(Server)程序,简称服务器。 一旦通讯建立,则客户端和服务

    2024年02月06日
    浏览(29)
  • cockpit管理控制台-尚文网络xUP楠哥

    ~~全文共1499字,阅读需约5分钟。 进Q群11372462,领取专属报名福利,包含云计算学习路线图+代表性实战训练+大厂云计算面试题资料! Cockpit 是红帽开发的web方式的服务管理工具,从Linux7版本开始就有了,其优点可以管理很多种服务;除了最基本的主机系统信息,CPU、内存使用

    2024年02月02日
    浏览(28)
  • 【pycharm】控制台报错:终端无法加载文件\venv\Scripts\activate.ps1

    目录 一、在pycharm控制台输入  二、在windows的power shell (以管理员方式打开) 三、 在pycharm控制台输入  四、重新打开pycharm即可  前言:安装pycharm2022-03版本出现的终端打开报错 控制台显示: Restricted 输入Y  返回: remotesigned

    2024年02月07日
    浏览(44)
  • 解决vue3使用iconpark控制台预警提示问题

    最近在项目中使用 iconpark-icon 来管理图标,一切都很顺利,引入链接后,图标正常显示,没有报错。但是控制台却发出了预警信息。 [Vue warn]: Failed to resolve component: iconpark-icon If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 虽说不

    2024年02月04日
    浏览(30)
  • 搭建第一个区块链网络(Fisco-Bcos),启动并使用控制台

    1.安装依赖 centos7 Ubuntu 2.创建操作目录, 下载安装脚本 3. 搭建单群组4节点联盟链 搭建成功截图如下  4.启动FISCO BCOS链 启动成功截图如下  5.检查进程 检查进程是否启动  输出结果如下,如果进程数不为4,则进程没有启动(一般是端口被占用导致的)  6.检查日志输出 查看节

    2024年02月04日
    浏览(40)
  • Ajax学习:如何在Chrome网络控制台查看通信报文(请求报文/响应报文)

    第一步:F12开启控制台, 第二步骤:打开网络标签 然后刷新页面 在网络标签位置处,这时候会出现所有发送的请求  点击第一个:会出现内容  预览部分:是解析 观察解析结果处 标头=headers:主要观察请求头和请求体部分 GET请求部分  请求标头:  点击上方查看源代码:就会

    2024年02月15日
    浏览(37)
  • 浏览器中下载了vue扩展程序,控制台却不显示vue,且vue标签是灰色

    1.查看扩展程序 方法:点击浏览器右上角三个点→更多工具→扩展工具,确保这两个键是打开状态 2.点击详细信息(如图)→将这俩按钮打开 3.若vue标识还是灰色 在浏览器中输入 chrome://version/,找到个人资料路径,复制该路径,在电脑中找到该路径下的Extensions→插件文件名→

    2024年02月14日
    浏览(37)
  • vue3+elment复杂详情页面打开后,再打开其他页面都显示空白,控制台也没什么特殊报错

    页面使用了el-tabs 、 el-tab-pane、el-table 等标签 但是经测试不是这些问题导致的 js也使用了onMounted ,但是除掉也时空白页面 反正之前人写的页面可乱,尤其是js这块,穿插引用import一大堆 主题页面样式布局如下 最后看到页面代码太乱,就动了下页面布局代码,js也归类调整了

    2024年04月14日
    浏览(27)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包