https域名下 请求http图片链接 被自动变成https请求

news2024/10/7 4:33:19

现象
在以 https 协议页面,以 <img src="http://baidu.com/img/image.png"> 方式请求资源时,http 协议的资源地址被转为 https 的。

溯源检查过程
这个问题真的是第一次遇到,本地开发时没发现问题,等到上到测试环境时发现有些图片无法显示。
检查发现 域名用的是https,图片来源有两种,一个是https的,另一个想必大家也猜到了是http的 但之前没发现不能显示啊!
再细查我发现后端给的 http链接 我竟然发的https链接,而图片资源服务器没有做443端口转发,即不支持https链接所以无法获取图片。这时查文档发现大家说是因为前端设置了这个:


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

很显然我的代码中没有,再怀疑是nginx中是不是加了设置,把http转为了https,
第一种方式使用return 301

server {
   listen 80;
   server_name www.phpmianshi.com;
   return 301 https://$http_host$request_uri;
   access_log  off;
}

第二种方式使用rewrite

server {
	listen 80;
	server_name  www.phpmianshi.com ;
	rewrite ^(.*) https://$server_name$1 permanent; #此句最关键
}

第三种方式使用error_page

#使用同一个端口,http转https
原理:
http和https是tcp的上层协议,当nginx服务器建立tcp连接后,根据收到的第一份数据来确定客户端是希望建立tls还是http。nginx会判断tcp请求的首写节内容以进行区分,如果是0x80或者0x16就可能是ssl或者tls,然后尝试https握手。如果端口开启了https,但请求过来的并不是,会抛出一个http级别的错误,这个错误的状态码是NGX_HTTP_TO_HTTPS,错误代码497,然后在返回response中会抛出一个400错误(因为497不是标准状态码,丢给浏览器也没有用),这时浏览器会显示"400 Bad Request,The plain HTTP request was sent to HTTPS port"

server {
	 listen 80 ssl;
	 listen www.phpmianshi.com:80;    #此处添加你要该链接访问的域名
	 server_name  www.phpmianshi.com ;
	 error_page 497 https://$host:8080$request_uri; #此句最关键,重新定义端口
	 #error_page 497 https://$http_host$request_uri; #此句最关键,只是将http改为https,其他不变
}

host:没有端口的server_name :www.phpmianshi.com
http_host:有端口的server_name :www.phpmianshi.com
request_uri:server_name后面的部分 :/?id=297

经检查也是没有,哎,继续查原因,这时测试反馈有的谷歌浏览器可以看到图片而我和另一个主要测试同学不行,查看谷歌浏览器版本,我和另一个主要测试同学是最新版,
在这里插入图片描述
最终原因
chrome 新版浏览器会把 http 开头的 url 给重定向到 https 开头的资源 url 上去,若你的资源服务器没有做443端口转发,那就导致资源无法加载。

解决方案
临时解决 - 很显然这个不靠谱,还能挨个让客户改呢
1、地址栏中输入 chrome://net-internals/#hsts
2、在 Delete domain security policies 中输入项目的域名,并 Delete 删除(输入的是http://后面的域名)
3、可以在 Query domain 测试是否删除成功
4、这里如果还是不行, 清除浏览器缓存,然后重启浏览器再试一试。

后端解决 - 不用挣扎这是唯一可行的方案,否则只能放弃新版谷歌浏览器,或者做下兼容处理,在图片不能显示时搞点别的样式放上去
支持 https 请求该资源

谷歌浏览器真是激进啊,别的浏览器暂时没发现这个问题

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

我为什么选择这样一份经常出差的工作

这几个月进入出差模式&#xff0c;在酒店与工厂两点一线之间往返。周五&#xff0c;在返回酒店途中&#xff0c;一名同事问我&#xff1a;“你工作了那么多年&#xff0c;为什么选择这样一份出差的工作&#xff1f;”&#xff0c;言外之意就是出差不方便&#xff0c;与家人、朋…

MR混合现实在军事课堂教学中的应用演示

战场模拟&#xff1a;利用MR技术可以创建逼真的战场模拟环境&#xff0c;将学生置身于真实的战场场景中&#xff0c;可以体验和学习各种作战技巧和战术策略。学生可以通过佩戴MR头盔或眼镜&#xff0c;观察虚拟的场景&#xff0c;并与虚拟对象进行互动&#xff0c;如操作武器、…

俄罗斯四大平台速卖通、Joom、Ozon 和 UMKA中国卖家如何脱颖而出!

随着全球化的不断推进&#xff0c;越来越多的中国卖家将目光投向了俄罗斯这个广阔的市场。在众多的跨境电商平台中&#xff0c;速卖通、Joom、Ozon 和 UMKA 无疑是最受关注的四个平台。本文将从卖家的角度&#xff0c;详细分析这四大平台的特点和优势&#xff0c;帮助找到最…

Apple Pencil值得买吗?便宜好用的触控笔推荐

很多人都在用ipad记笔记和绘画。还有就是&#xff0c;目前的ipad&#xff0c;都是以实用为主&#xff0c;他们觉得&#xff0c;要想让ipad的利用发挥到最大化&#xff0c;就需要一款好用的电容笔。其实&#xff0c;如果只是单纯的想要记笔记&#xff0c;也有很多的平替电容笔&a…

Vue监控路由/路由参数, 优雅刷新当前页面数据的方法

目录 Vue监控路由 Vue中watch监控路由 Vue中watch监控路由的某一个参数 Vue中watch同时监控多个路由 刷新当前页面数据 location.reload $router.go(0) this.$router.resolve()与this.$router.resolve() 1. this.$router.resolve()方法 2. this.$router.push()方法 …

如何在通信行业运用IPD?

通信是人与人或人与自然之间通过某种行为或媒介进行的信息交流与传递&#xff0c;从广义上指需要信息的双方或多方在不违背各自意愿的情况下无论采用何种方法&#xff0c;使用何种媒质&#xff0c;将信息从某方准确安全传送到另方。通信行业&#xff0c;简而言之&#xff0c;就…

Docker 精简安装 Nacos 2.2.1 单机版本

准备工作&#xff1a; 1&#xff09;已安装docker 2&#xff09;数据库准备&#xff0c;演示使用MySql5.7版本 1、拉取 [rootTseng-HW ~]# docker pull nacos/nacos-server:v2.2.1 v2.2.1: Pulling from nacos/nacos-server 2d473b07cdd5: Already exists 77c5a601c050: Pul…

网安新战场:CTF的那些事儿

CTF CTF的前世今生CTF竞赛中的挑战和难题CTF竞赛必备知识CTF竞赛中的技巧与策略&#xff1a; 写在末尾 主页传送门&#xff1a;&#x1f4c0; 传送 CTF的前世今生 CTF&#xff08;Capture The Flag&#xff09;是一种网络安全竞赛&#xff0c;旨在测试参与者解决各种网络安全问…

震坤行商品详情数据接口

震坤行商品详情数据接口可以通过HTTP请求和响应获取商品详情信息。请求方法为GET&#xff0c;请求参数包括商品ID和API密钥&#xff0c;响应数据为JSON格式。 API控制台获取API密钥&#xff1a;注册并登录震坤行API控制台&#xff0c;创建项目并获取API密钥。 JavaScript调用…

(三)推断的逼近方法-通过加权重采样的贝叶斯定理

加权重采样 import numpy as np import matplotlib.pyplot as plt# Step 1: Generate 10,000 random theta values from U([0, 1]) n 10000 theta_values np.random.rand(n)# Define the function to compute weights for a given theta def compute_weight(theta):return (…

仕达利恩飞讯软件TPM设备管理项目正式启动,向数字化再迈一步

9月25日&#xff0c;仕达利恩(惠州)科技有限公司&#xff08;以下简称“仕达利恩”&#xff09;设备智能数采项目启动会成功召开&#xff0c;仕达利恩首席崔浩渊、杨翠琼次长携项目主要负责人共同出席本次启动会。为解决仕达利恩现阶段生产过程中的设备管理、设备配件仓管理以及…

doT.js模板学习笔记

doT.js模板学习笔记 欢迎学习doT.js模板学习笔记doT.js模板是什么doT.js 主要优势在doT.js好处引入方式基本语法语法示例结尾 欢迎学习doT.js模板学习笔记 doT.js官方网站 本文章得示例源码 doT.js模板是什么 doT.js 是一个 JavaScript 模板框架&#xff0c;在 web 前端使用 d…

Netty场景及其原理

Netty场景及其原理 Netty简化Java NIO的类库的使用&#xff0c;包括Selector、 ServerSocketChannel、 SocketChannel、ByteBuffer&#xff0c;解决了断线重连、 网络闪断、心跳处理、半包读写、 网络拥塞和异常流的处理等。Netty拥有高性能、 吞吐量更高&#xff0c;延迟更低…

909. 蛇梯棋

909. 蛇梯棋 题目-中等难度示例1. bfs 题目-中等难度 给你一个大小为 n x n 的整数矩阵 board &#xff0c;方格按从 1 到 n2 编号&#xff0c;编号遵循 转行交替方式 &#xff0c;从左下角开始 &#xff08;即&#xff0c;从 board[n - 1][0] 开始&#xff09;每一行交替方向…

Cat Online Judge 判题系统

Cat Online Judge 作者&#xff1a;猫十二懿 项目介绍 本项目是基于 Spring Boot Spring Cloud Alibaba 微服务 Docker RabbitMQ Vue 3 的 编程算法题目在线评测系统 &#xff08;简称OJ&#xff09;。 在线访问&#xff1a;http://oj.kongshier.top/ 源项目来自编程导航…

Postman接口自动化

一、接口测试的简介和分类 接口测试就是测试系统组件接口之间的一种测试。 分类 : 测试外部接口: 测试被测系统和外部系统之间的接口。( 只需要测试正例即可 ) 测试内部接口 : 1、内部接口只提供给内部系统使用。( 预算系统&#xff0c;承保系统 )( 只需要测试正例即可 ) 2、…

【算法】分治法

文章目录 概念原理和步骤代码示例 总结 概念 分治法&#xff08;Divide and Conquer&#xff09;是一种算法设计策略&#xff0c;其思想是将一个大问题划分为若干小规模的子问题&#xff0c;然后递归地解决每个子问题&#xff0c;并将它们的解合并起来以得到原始问题的解。分治…

记一次springboot的@RequestBody json值注入失败的问题(字段大小写的问题)

有时候做后端开发时&#xff0c;难免会与算法联调接口&#xff0c;很多算法的变量命名时全部大写&#xff0c;在实际springmvc开发中会遇到无法赋值的问题。 先粘贴问题代码 entity类 Data NoArgsConstructor EqualsAndHashCode(callSuper true) ToString(callSuper true) …

Linux命令之chattr命令

一、chattr命令简介 chattr命令用于更改文件或目录的属性&#xff0c;包括不可修改属性、同步属性、追加属性、无尽属性、压缩属性、无尽属性、不可删除属性等。chattr命令只能由超级用户或文件的所有者使用。 二、chattr命令使用示例 1、给文件设置版本 -v参数设置版本信息只…

数据库备份的几种方式

数据已成为当今数字时代公司的主要资产。然而&#xff0c;数据的安全性和完整性也成为企业经营的主要挑战。数据库备份对于维护这些宝贵的数据尤为重要。本文将详细介绍几种比较常见的数据库备份方式&#xff0c;帮助用户掌握如何有效地保护数据&#xff0c;保证业务的可持续发…