https网站加载http资源问题

https网站加载http资源问题

前言:最近项目对接了一个第三方的平台、我们需要展示第三方平台返回来的图片资源、由于我们的服务器设置为了https、但是第三方平台返回的图片链接是 http 资源。所以就出现了图片无法加载出来的问题,在此记录一下问题的解决方案。

原因:
这是浏览器的规则限制了、https:// 页面只能加载访问安全的https:// 资源
在这里插入图片描述

解决方案:
方案一:在资源服务器上设置响应头

"Content-Security-Policy": "upgrade-insecure-requests"

弊端:这种解决方案仅限于需要加载的http资源是在我们自己服务器上(我们自己可以配置操作)。如果是第三方服务器上则我们无法操作

方案二:在主页面(入口html文件)设置meta头
以Vue项目为例:在public/index.html 文件内加入下面这行代码

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

方案三:删除链接中的http:
将需要访问的资源链接中的http: 协议前缀删除
不指定具体协议,使用资源协议自适配,比如,当前为https页面,那么就是https资源,如果是http页面,那么就是http资源。

//修改前
<link rel="stylesheet" href="http://at.alicdn.com/t/font_830376_qzecyukz0s.css" />
// 修改后
<link rel="stylesheet" href="//at.alicdn.com/t/font_830376_qzecyukz0s.css" />

方案四:将第三方资源下载到自己的服务器上、然后再访问。
这种方案就需要后端配合、后端将资源上传到我们自己的文件服务器上、返回再将自己的文件服务器的资源链接返回给前端。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/159751.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring启示录

2023.11.3 今天正式开始Spring的学习。这一章主要学习一些开发中的原则和思想&#xff0c;以此引出接下来要学的Spring框架。 OCP开闭原则 在软件开发过程中应当对扩展开放&#xff0c;对修改关闭。也就是说&#xff0c;如果在进行功能扩展的时候&#xff0c;添加额外的类是没问…

【计算机网络笔记】传输层——TCP的可靠数据传输

系列文章目录 什么是计算机网络&#xff1f; 什么是网络协议&#xff1f; 计算机网络的结构 数据交换之电路交换 数据交换之报文交换和分组交换 分组交换 vs 电路交换 计算机网络性能&#xff08;1&#xff09;——速率、带宽、延迟 计算机网络性能&#xff08;2&#xff09;…

算法题:870. 优势洗牌

该算法是临时想出来的&#xff0c;Java代码的实现在时间上不占优&#xff0c;之后有时间要优化一下&#xff0c;目前就是给大家提供一下思路。 解题思路&#xff1a;田忌赛马的思想 贪心法。 Step1. 对两个数组进行排序。 Step2. 同时遍历排序后的nums2和nums1&#xff0c;将…

操作系统的线程模型

操作系统的线程调度有几个重要的概念&#xff1a; 调度器&#xff08;Thread Scheduler&#xff09;&#xff1a;内核通过操纵调度器对内核线程进行调度&#xff0c;并负责将线程的任务映射到各个处理器上内核线程&#xff08;Kernel Level Thread&#xff09;&#xff1a;简称…

测试用例设计方法:正交试验法详解!

01、正交试验法介绍 正交试验法是研究多因素、多水平的一种试验法&#xff0c;它是利用正交表来对试验进行设计&#xff0c;通过少数的试验替代全面试验&#xff0c;根据正交表的正交性从全面试验中挑选适量的、有代表性的点进行试验&#xff0c;这些有代表性的点具备了“均匀…

css基础之实现轮播图

原理介绍 图片轮播的原理是通过控制显示和隐藏不同的图片来实现图像的切换&#xff0c;从而创建连续播放的效果。用到的知识点有定位和定时器。 实现步骤&#xff1a; HTML 结构&#xff1a; 首先&#xff0c;需要在HTML中创建一个包含轮播图片的容器&#xff0c;通常使用 &l…

JavaScript设计模式之发布-订阅模式

发布者和订阅者完全解耦&#xff08;通过消息队列进行通信&#xff09; 适用场景&#xff1a;功能模块间进行通信&#xff0c;如Vue的事件总线。 ES6实现方式&#xff1a; class eventManager {constructor() {this.eventList {};}on(eventName, callback) {if (this.eventL…

块级作用域的理解

块级作用于的概念 由一对花括号{}中的语句集都属于一个块&#xff0c;在这个{}里面包含的块内定义的所有变量在代码块外都是不可见的&#xff0c;因此称为块级作用域。 作用域永远都是任何一门语言的重中之中&#xff0c;因为它控制着变量和参数的可见性和生命周期。讲到这里&…

搭建第一个区块链网络与一键部署WeBASE步骤

官网 搭建第一个区块链网络 — FISCO BCOS v2 v2.9.0 文档 (fisco-bcos-documentation.readthedocs.io) 一键部署 — WeBASE v1.5.5 文档 (webasedoc.readthedocs.io) 步骤 默认如MySQL、Python、java等依赖已经引入 1.创建操作目录, 下载安装脚本 创建操作目录 cd ~ &a…

​实现1个电脑打开多个微信​

实现1个电脑打开多个微信&#xff1a;1、快速双击打开微信&#xff0c;可打开多个微信。2、按住回车键&#xff0c;双击打开微信&#xff0c;并快速放开回车键即可打开多个微信。3、用命令符也可打开多个微信。4、建立一个批处理文件实现打开多个微信。 方法一&#xff1a;最简…

故障诊断模型 | Maltab实现SVM支持向量机的故障诊断

效果一览 文章概述 故障诊断模型 | Maltab实现SVM支持向量机的故障诊断 模型描述 Chinese: Options:可用的选项即表示的涵义如下   -s svm类型:SVM设置类型(默认0)   0 – C-SVC   1 --v-SVC   2 – 一类SVM   3 – e -SVR   4 – v-SVR   -t 核函数类型:核函…

CoDeSys系列-4、基于Ubuntu的codesys运行时扩展包搭建Profinet主从环境

CoDeSys系列-4、基于Ubuntu的codesys运行时扩展包搭建Profinet主从环境 文章目录 CoDeSys系列-4、基于Ubuntu的codesys运行时扩展包搭建Profinet主从环境一、前言二、资料收集三、Ubuntu18.04从安装到更换实时内核1、下载安装Ubuntu18.042、下载安装实时内核&#xff0c;解决编…