前端请求后端接口报错(blocked:mixed-content),以及解决办法

报错原因:被浏览器拦截了,因为接口地址不是https的。

什么是混合内容(Mixed Content)

混合内容是指在同一页面中同时包含安全(HTTPS)和非安全(HTTP)资源的情况。当浏览器试图加载非安全资源时,它会发出“混合内容”警告,阻止加载不安全的请求。
为什么会出现“blocked:mixed-content”错误?

出现这个错误的原因

您的前端应用可能正在尝试加载一个HTTP资源,而该资源应该通过HTTPS协议进行传输。由于HTTP协议是不安全的,它可能会被中间人攻击(Man-in-the-Middle Attack)拦截,导致数据泄露或恶意修改。因此,浏览器默认阻止了这种不安全的请求。
如何解决“blocked:mixed-content”问题?

  1. 使用HTTPS协议:确保您的网站使用HTTPS协议进行通信。通过将协议从HTTP升级为HTTPS,可以确保数据在传输过程中的安全性。在购买域名时,可以选择支持HTTPS的证书,并在服务器上配置好SSL证书。
  2. 配置CORS(跨源资源共享):如果您的前端应用与后端服务器不在同一域下,需要通过跨域请求获取数据,需要确保后端服务器正确配置了CORS。CORS是一种机制,允许前端应用从其他域获取资源。在后端服务器上设置适当的CORS头部信息,以允许前端应用进行跨域请求。
  3. 检查请求的URL:仔细检查您的前端代码中发起请求的URL是否正确。有时候,由于手动输入错误或配置不当,可能导致请求的URL不是通过HTTPS协议传输的。确保所有接口请求都使用正确的协议和域名。
  4. 使用相对URL:如果您无法控制后端服务器的配置,或者由于某些原因无法使用HTTPS协议,您可以尝试使用相对URL来发起请求。相对URL是指不包含协议和域名的URL,例如“/api/data”。相对URL默认使用当前页面的协议和域名进行加载,这样可以避免因协议不一致而导致的混合内容问题。
  5. 使用Content Security Policy(CSP):CSP是一种安全机制,通过限制页面中允许加载的资源来防止跨站脚本攻击(XSS)等安全威胁。通过配置CSP,您可以指定哪些源是可信的,并阻止加载其他不安全的资源。在CSP中添加适当的源列表可以帮助解决混合内容问题。
    总结:
    “blocked:mixed-content”错误通常是由于前端应用尝试加载非安全资源导致的。为了解决这个问题,我们需要确保网站使用HTTPS协议进行通信,正确配置CORS和CSP,并仔细检查请求的URL是否正确。遵循这些步骤可以帮助您避免混合内容问题,提高网站的安全性。

解决办法

1.给接口配置https的服务,要花钱买ssl证书的。

2.设置浏览器允许不安全的访问,简单设置:设置为允许就好了

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

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

相关文章

Diving into the STM32 HAL-----Interrupts

硬件管理就是处理异步事件。其中大部分来自硬件外围设备。例如,计时器达到配置的 period 值,或者 UART 在数据到达时发出警告。 中断是一个异步事件,它会导致按优先级停止执行当前代码(中断越重要,其优先级越高;这将导…

linux操作系统进程

linux操作系统是对下的软硬件进行管理,为了能够对上提供稳定,快速,安全的服务而诞生的软件。 广义上的操作系统是包含搭载在操作系统上的软件和函数库等文件的。 狭义上的操作系统就是操作系统内核,进行进程管理,文件…

js 获取当前时间与前一个月时间

// 获取当前时间的毫秒数 var currentTimeMillis new Date().getTime();// 获取前一个月的Date对象 var dateLastMonth new Date(); dateLastMonth.setMonth(dateLastMonth.getMonth() - 1);// 获取前一个月的毫秒数 var timeMillisLastMonth dateLastMonth.getTime();conso…

php内置服务停止shell小工具,用来停止指定的端口的php内置服务进程

最近vscode总是喜欢闪退,这导致了上面启动的php内置服务变成了无法管理状态,所以就有了这个工具来停止相关的PHP内置服务进程. 将下面的代码保存到本地合适的位置,并命名为 stop.sh #!/bin/bash # Author: tekintian # Date: 2024-11-02 …

服务器文件访问协议

服务器文件访问协议 摘要NFS、CIFS、SMB概述SMBWindows SMBLinux SambaPython SMB NFS 摘要 本篇博客参考网上文档和博客,对基于网络的服务器/主机的文件访问、共享协议进行简要总结,完整内容将会不断更新,以便加深理解和记忆 NFS、CIFS、S…

Leetcode - 周赛421

目录 一,3334. 数组的最大因子得分 二,3335. 字符串转换后的长度 I 三,3336. 最大公约数相等的子序列数量 四,3337. 字符串转换后的长度 II 一,3334. 数组的最大因子得分 暴力方法就不演示,这里介绍一个…

【java】java的基本程序设计结构06-运算符

运算符 一、分类 算术运算符关系运算符位运算符逻辑运算符赋值运算符其他运算符 1.1 算术运算符 操作符描述例子加法 - 相加运算符两侧的值A B 等于 30-减法 - 左操作数减去右操作数A – B 等于 -10*乘法 - 相乘操作符两侧的值A * B等于200/除法 - 左操作数除以右操作数B /…

群控系统服务端开发模式-应用开发-菜单功能开发

为什么优先开发菜单,而不是优先开发管理员?查看一下程序草图就明白,还有一个重点就是,管理员需要添加图片,而我还没有封装上传工具及上传目标。 一、添加路由 在根目录下route文件夹下的app.php文件里面,添…

顶点动画-河流的效果

目标是让一个矩形网格面片,通过顶点动画,实现出河流的效果。(如下图)所谓的河流效果,就是呈现出波浪感,而想要呈现出波浪感,我们必须了解 波长、波动频率、波动幅度 这些关键因素 1、波浪感的关…

线程函数和线程启动的几种不同形式

线程函数和线程启动的几种不同形式 在C中&#xff0c;线程函数和线程启动可以通过多种形式实现。以下是几种常见的形式&#xff0c;并附有相应的示例代码。 1. 使用函数指针启动线程 最基本的方式是使用函数指针来启动线程。 示例代码&#xff1a; #include <iostream&g…

3.1 快速启动Flink集群

文章目录 1. 环境配置2. 本地启动3. 集群启动4. 向集群提交作业4.1 提交作业概述4.2 添加打包插件4.3 将项目打包4.4 在Web UI上提交作业4.5 命令行提交作业 在本实战中&#xff0c;我们将快速启动Apache Flink 1.13.0集群&#xff0c;并在Hadoop集群环境中提交作业。首先&…

讲讲RabbitMQ 性能优化

大家好&#xff0c;我是锋哥。今天分享关于【RabbitMQ 性能优化&#xff1f;】面试题。希望对大家有帮助&#xff1b; 讲讲RabbitMQ 性能优化 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 RabbitMQ 是一个强大的消息代理&#xff0c;广泛用于分布式系统中&#x…

redolog与binlog的写入机制

redo log 事务在执行的过程中&#xff0c;生成的redo log是要先写到redo log buffer中的。redo log buffer里面的内容不需要每次生成后都直接持久化到磁盘。 如果事务执行期间MySQL发生异常重启&#xff0c;那这部分日志就丢了&#xff0c;但是由于没有commit&#xff0c;所以…

推荐一款数学绘图工具:FX Draw Tools

FX Draw Tools是目前最新好用的一款数学绘图工具。该软件界面简洁&#xff0c;使用方便。该软件能够帮助用户快速制作数学图表&#xff0c;从而提高用户的工作效率&#xff0c;轻松完成制图工作&#xff0c;欢迎需要的用户前来下载使用。 功能特色 1. 180和360可以被添加到任何…

《云计算网络技术与应用》实训8-1:OpenvSwitch简单配置练习

1.按《云计算网络技术与应用》实训5-1进行环境配置&#xff0c;安装好OVS 2.开启OVS虚拟交换机 3.创建一个网桥br0 4.查看网桥列表 5.把ens34网卡连接到网桥br0上 6. 查看网桥br0所有端口 7.列出网卡ens34连接的所有网桥列表 8.查看OVS网络状态 9.将网桥br0上连接的网卡ens34删…

Netty 组件介绍 - pipeline

ChannelPipeline为ChannelHandler链提供了容器&#xff0c;并且定义了该链上的入站和出站事件。当initChannel()被调用时&#xff0c;ChannelInitializer将在ChannelPipeline中安装一组自定义的ChannelHandler。他们的执行顺序就是添加顺序。 Server public class Server {pr…

Leetcode 热题100 之 二叉树3

1.二叉树展开为链表 思路分析&#xff1a;迭代法。对于每个节点&#xff0c;我们将其左子树放到右子树的位置。将原来的右子树接到新的右子树&#xff08;也就是原来的左子树&#xff09;的末端。移动到右子节点&#xff0c;继续处理下一节点&#xff0c;直到所有节点都处理完。…

UE5.4 PCG Layered Biomes插件

B站学习链接 官方文档 一、PCGSpawn Preset&#xff1a;负责管理PCG要用到的植被资产有哪些 二、BiomesSettings&#xff1a;设置要使用的植被资产Layer、Spawn参数 1.高度Layer参数&#xff1a; 2.地形Layer&#xff1a;我这里用地形样条线绘制了一块地形Layer 绘制点和…

单个相机矫正畸变

1、通过标定助手获取到内参外参&#xff0c;外参在此无效&#xff0c;只用到了内参 2、然后通过halcon算子进行矫正 参考&#xff1a;超人视觉

Orleans8.2入门测试

微软官方文档&#xff1a;快速入门&#xff1a;使用 ASP.NET Core 生成第一个 Orleans 应用 - .NET | Microsoft Learn 项目及引入的nuget库&#xff1a; 1、接口项目&#xff1b;2、接口实现项目&#xff1b;3、silo项目&#xff1b;4、客户端项目 其中Microsoft.Orleans.St…