JSONP请求报错block:mixed-content（已解决）

最新推荐文章于 2024-08-29 15:19:22 发布
最新推荐文章于 2024-08-29 15:19:22 发布
阅读量1.4k 收藏 5
点赞数 2
分类专栏： 日常问题 前端进阶之路 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RedaTao/article/details/122534159
版权
本文介绍了如何在测试环境中遇到https页面嵌入http接口的Mixed Content错误，通过升级接口为https或在主页面设置Content-Security-Policy来解决此问题，适用于前后端开发者和网站部署者。
摘要由CSDN通过智能技术生成

Mixed Content: The page was loaded over HTTPS，blocked the content must be served over HTTPS

问题描述

开发环境 调用接口 正常，发布到测试环境时，调用接口提示 “block:mixed-content”

问题原因

浏览器不允许在https页面里嵌入http的请求
开发环境是本地起的http服务，发到测试环境时是 https，而调用的接口地址是固定的 http接口，导致测试环境报错。

解决问题

方法1.
如果该接口支持https，直接调用https接口即可；
方法2.
在主页面的head中加入下面代码（将调用的http请求升级成https请求并调用）

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
前端卡卡西呀
关注
专栏目录
uniapp | vue2 | vue3 - 解决调用天地图功能服务时 http 网络请求报错 net::ERR ABORTED 503（Service Temporarily Unavailabl）
王佳斌
08-06 3758
vue，uni-app，天地图，请求报错，503，请求失败，map.tianditu，天地图503，天地图请求503，接口503错误怎么办，vue天地图，uniAPP天地图，获取定位接口服务器报错503，获取当前定位，定位功能，IP属地定位，天地图服务器报错，如何解决报错，net::ERR ABORTED 503（Service Temporarily Unavailabl），GET，POST，服务暂时不可用，react天地图，一直等待吗，报错怎么办，定位报错，轨迹，经纬度，天地图服务器503，在 vue2
springboot 针对 vue-resource jsonp 请求的 Uncaught SyntaxError: Unexpected token 问题解决
weixin_52767086的博客
01-03 509
springboot 针对 vue-resource jsonp 请求的 Uncaught SyntaxError: Unexpected token 问题解决SpringBoot + Vuespringbootvue-resource jsonp SpringBoot + Vue 后端使用springboot，前端使用vue-resource jsonp发送请求，如果后端不做特殊处理直接返回，会出现 Uncaught SyntaxError: Unexpected token的错误。这里提供解决方法。 s
浏览器访问网址出现blocked：mixed-content问题
最新发布
Blz624613442的博客
08-29 2016
最近有个别同事提出浏览器通过域名访问内部系统时，出现网络错误，无法登录内部系统，但其他同事仍然正常的，并无不妥。通过对他们浏览器运行检查时发现，网络状态报(Chrome下会显示已屏蔽再对访问路径仔细对比发现出现问题的同事，都使用了https进行访问，更改为http访问后恢复正常。
浏览器接口出现Mixed-content报错及解决方案
Rice_w的博客
02-29 1万+
最近在部署项目时，遇到了好几次 部署到线上后 访问接口出现 mixed-content 报错，但是在本地部署是没有这个问题的，所以将这个问题记录下来。
https请求报错block:mixed-content问题的解决办法（已解决）
12-21
问题截图 问题分析 今天，多个接口突然出现 block:mixed-content  错误，于是排查了一下发现： 错误：https页面去发送http请求报错(浏览器阻止https发送http请求) 原来是由于项目改成了https协议的缘故，出现了请求被拦截； 其实是浏览器不允许在https页面里嵌入http的请求，现在高版本的浏览器为了用户体验，都不会弹窗报错，只会在控制台上打印一条错误信息。 Mixed Content: The page was loaded over HTTPS，blocked the content must be served over HTTPS 如下图： 解
web无插件直播点播视频结构化分析系统EasyDSS开启https报错 (blocked:mixed-content) 问题
EasyDSS官方技术博客
03-29 351
TSINGSEE青犀视频的大部分视频平台都是能够开启https的，在EasyDSS的部分版本中，如果开启 https，通过 https访问http 地址，浏览器的控制台会报出(blocked:mixed-content)错误： 出现该种错误是浏览器的默认功能，如果在 https 端口的网站访问 http 的地址就会出现错误。https 地址相对于http地址来说，安全性更强，因此 https 在渐渐的取代 http。 出现该种情况，需要修改软件后端，对访问的路径进行判断，如果是 https 访问
Chrome插件请求数据时 请求报错(blocked:mixed-content)
04-23 8603
Chrome插件请求数据时请求报错（blocked:mixed-content）问题原因解决方案方案1：配置https方案1：使用background.js请求http 问题原因 问题原因是我在csdn上搜索到的，主要原因为https页面去发送http请求报错(浏览器阻止https发送http请求) 解决方案 方案1：配置https 将请求的服务器添加openssl扩展，使服务器支持https。该...
前端请求状态为blocked:mixed-content解决方法
weixin_44577059的博客
09-30 2779
前端请求状态为blocked:mixed-content解决方法
http----在https网站请求http，提示block:mixed-content问题
Seeyoucm
04-02 7035
在https网站请求http，提示block:mixed-content问题
Referrer-Policy : strict-origin-when-cross-origin解决方案
06-05
在互联网应用开发中，前后端分离已成为常见的架构模式。随着Web技术的发展，跨域安全问题愈发突出，"Referrer-Policy : strict-origin-when-cross-origin"便是为了解决这一问题而提出的策略。本文将深入探讨这个策略...
Ajax跨域请求解决方案-JSONP
12-03
然而，Ajax技术在实现动态网页交互时常常需要跨越这个限制，这时就引入了JSONP（JSON with Padding）作为跨域请求的一种解决方案。本文将详细介绍JSONP的工作原理以及如何在ASP.NET网站开发中应用JSONP解决Ajax跨域...
Vue 报错TypeError: this.$set is not a function 的解决方法
12-12
报错场景：将APi中得到的response数据，用Vue$set()使数据动态响应 报错代码： methods: { textTranslate: function (text, to) { $.ajax({ url: 'http://openapi.youdao.com/api', type: 'post', dataType: ...
前端请求接口状态报blocked:mixed-content的原因
热门推荐
博哥的二进制世界
08-05 2万+
前端请求接口状态报blocked:mixed-content的原因 如下图，前端在请求接口的时候报错Mixed Content，这是因为浏览器不允许在https协议的页面里请求http的接口，现在高版本的浏览器为了用户体验，都不会弹窗报错，只会在控制台上打印一条错误信息。 最简单的解决办法当然就是不要使用http请求，把网站上的http请求都迁移到https。 ...
Https调用http接口时，出现blocked:mixed-content的解决方法
weixin_42786042的博客
04-28 7425
Https调用http接口时，出现blocked:mixed-content的解决方法现象解决方案 现象 如图所示，出现这种情况，一般是https调用了http的接口，这个是https调用了一个第三方的地图服务，但是调用的是http的接口，所以会报错，思路就是把http接口换成https接口，下面说解决方案 解决方案 方法一： 把上面的替换成下面的样子 这样的话浏览器就会根据你域名的请求来识别，比如https下他会自动请求https的资源，而http时，请求http的资源。 但是有可能他并不存
ajax请求报错(blocked:mixed-content)
yiyueqinghui的博客
12-13 1万+
ajax请求报错(blocked:mixed-content) 原因： https页面去发送http请求报错(浏览器阻止https发送http请求) 解决： 把域名（http）绑定证书（https）
nginx反向代理到Https后，请求Http资源报错blocked mixed-content
Honins的博客
03-28 1万+
第一种方法： <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> 比如这里我用了bootcss的cdn,但是正常情况下这样写是会报blocked mixed-content错误的。 解决方法： <link rel="stylesheet...
vue3项目 前端blocked:mixed-content问题解决方案
qq_48665028的博客
07-07 750
blocked:mixed-content其实浏览器不允许在https页面里嵌入http的请求，现在高版本的浏览器为了用户体验，都不会弹窗报错，只会在控制台上打印一条错误信息。一般出现这个问题就是在https协议里嵌入了http请求，解决方法如下。直接设置谷歌浏览器允许不安全内容。
blocked:mixed-content 如何解决
06-03
"blocked:mixed-content" 是浏览器对于 HTTPS 页面加载 HTTP 资源时的一种安全策略。如果你的网页中引用了 HTTP 的资源，例如图片、样式表或者脚本等，那么浏览器就会拦截这些 HTTP 资源的加载，从而出现 "blocked:mixed-content" 错误。 为了解决这个问题，你可以采取以下几个方法： 1. 将所有的 HTTP 资源都替换为 HTTPS 资源，这样就不会出现 "blocked:mixed-content" 错误了。 2. 如果你的网站中使用了第三方库或者插件，可以检查这些库或者插件是否支持 HTTPS，如果支持，那么就将其引用地址改为 HTTPS。 3. 如果你的网站中确实需要引用 HTTP 资源，可以在服务器端进行配置，将 HTTP 资源转换为 HTTPS 资源，以避免 "blocked:mixed-content" 错误。 总之，解决 "blocked:mixed-content" 错误的关键是要确保所有的资源都是通过 HTTPS 加载的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端卡卡西呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值