https网站加载http资源问题

https网站加载http资源问题

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

原因:

这是浏览器的规则限制了、https:// 页面只能加载访问安全的https:// 资源

解决方案:

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

javascript 复制代码
"Content-Security-Policy": "upgrade-insecure-requests"

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

方案二:在主页面(入口html文件)设置meta头

以Vue项目为例:在public/index.html 文件内加入下面这行代码

javascript 复制代码
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

方案三:删除链接中的http:

将需要访问的资源链接中的http: 协议前缀删除

不指定具体协议,使用资源协议自适配,比如,当前为https页面,那么就是https资源,如果是http页面,那么就是http资源。

javascript 复制代码
//修改前
<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" />

方案四:将第三方资源下载到自己的服务器上、然后再访问。

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

相关推荐
IT19958 分钟前
计算机理论文档阅读笔记-MQTT vs WebSocket
笔记·websocket·网络协议
jaysee-sjc21 分钟前
十六、Java 网络编程全解析:UDP/TCP 通信 + BS/CS 架构
java·开发语言·网络·tcp/ip·算法·架构·udp
Dynadot_tech26 分钟前
如何出售域名自己的域名
网络·域名·dynadot·网站域名
弓.长.31 分钟前
ReactNative for OpenHarmony项目鸿蒙化三方库:react-native-netinfo — 网络状态检测
网络·react native·harmonyos
网云工程师手记39 分钟前
深信服零信任 aTrust 对接 Keycloak(OIDC)实战指南
网络·网络安全·零信任·oauth2·sso单点登录·企业身份认证
博语小屋1 小时前
HTTP_认识cookie与session
网络·网络协议·http
DX_水位流量监测1 小时前
德希科技供水水质多参数 PLC 一体机
网络·人工智能·深度学习·水质监测·水质传感器·水质厂家·供水水质监测
艾莉丝努力练剑1 小时前
System V IPC底层原理详解
linux·运维·服务器·网络·c++·人工智能·学习
腾视科技TENSORTEC1 小时前
腾视科技重磅发布AD03行车记录仪DashCam!全维守护,智驭出行新生态
大数据·网络·人工智能·科技·ai·车载系统·车载监控
弓.长.1 小时前
ReactNative for OpenHarmony项目鸿蒙化三方库:react-native-network-info — 网络信息获取
网络·react native·harmonyos