前端请求后端接口报错(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.mzph.cn/news/884543.shtml

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

相关文章

SMTP协议,即简单邮件传输协议

SMTP协议,即简单邮件传输协议(Simple Mail Transfer Protocol),是一种用于发送电子邮件的互联网标准。以下是对SMTP协议的详细介绍: 一、定义与工作原理 SMTP定义了邮件服务器之间以及邮件客户端与服务器之间的通信规…

Xss_less靶场攻略(1-18)

xss-lab-less1 ur特殊字符转义 存在url中 转义符为 %2B& 转义符为 %26空格 转义符为 或 %20/ 转义符为 %2F? 转义符为 %3F% 转义符为 %25#转义符为 %23 转义符为 %3Dimg 标签懒加载 在XSS攻击中,img标签的src属性是一个常见的攻击向量,因为它可以…

Unity humanoid 模型头发动画失效问题

在上一篇【Unity实战笔记】第二十二 提到humanoid 模型会使原先的头发动画失效,如下图所示: 头发摆动的是generic模型和动画,不动的是humanoid模型和动画 一开始我是尝试过在模型Optimize Game objects手动添加缺失的头发骨骼的,奈…

基于MATLAB的战术手势识别

手势识别的研究起步于20世纪末,由于计算机技术的发展,特别是近年来虚拟现实技术的发展,手势识别的研究也到达一个新的高度。熵分析法是韩国的李金石、李振恩等人通过从背景复杂的视频数据中分割出人的手势形状,然后计算手型的质心…

CSS学习之Grid网格布局基本概念、容器属性

网格布局 网格布局(Grid)是将网页划分成一个个网格单元,可任意组合不同的网格,轻松实现各种布局效果,也是目前CSS中最强大布局方案,比Flex更强大。 基本概念 容器和项目 当一个 HTML 元素将 display 属性…

Yelp 数据集进行用户画像, 使用聚类做推荐

使用 Yelp 数据集进行用户画像(User Profiling)是一项有趣的任务,可以理解用户的偏好、行为和特征。以下是总结的一个基本的步骤,帮助构建用户画像 pandas 加载数据: import pandas as pd# 加载数据 users pd.read_…

JAVA题目笔记(十) 带有继承结构的JavaBean类

一、创建带有继承结构的标准JavaBean类(1) public class Worker {private String name;private int workid;private int salary;public Worker(){}public Worker(String name,int workid,int payment){this.namename;this.salarypayment;this.workidworkid;}public void eat(){…

keepalive+mysql8双主

1.概述 利用keepalived实现Mysql数据库的高可用,KeepalivedMysql双主来实现MYSQL-HA,我们必须保证两台Mysql数据库的数据完全一致,实现方法是两台Mysql互为主从关系,通过keepalived配置VIP,实现当其中的一台Mysql数据库…

【C++笔记】容器适配器及deque和仿函数

【C笔记】容器适配器及deque和仿函数 🔥个人主页:大白的编程日记 🔥专栏:C笔记 文章目录 【C笔记】容器适配器及deque和仿函数前言一.容器适配器1.1什么是容器适配器1.2 STL标准库中stack和queue的底层结构 二.stack2.1stack类模…

centos7.X zabbix监控参数以及邮件报警和钉钉报警

1:zabbix安装 1.1 zabbix 环境要求 硬件配置: 2个CPU核心, 4G 内存, 50G 硬盘(最低) 操作系统: Linux centos7.2 x86_64 Python 2.7.x Mariadb Server ≥ 5.5.56 httpd-2.4.6-93.el7.centos.x86_64 PHP 5.4.161.2 zabbix安装版本 [rootnod…

基于向量检索的RAG大模型

一、什么是向量 向量是一种有大小和方向的数学对象。它可以表示为从一个点到另一个点的有向线段。例如,二维空间中的向量可以表示为 (𝑥,𝑦) ,表示从原点 (0,0)到点 (𝑥,𝑦)的有向线段。 1.1、文本向量 1…

串口屏控制的自动滑轨(未完工)

序言 疫情期间自己制作了一个自动滑轨,基于无线遥控的,但是整体太大了,非常不方便携带,所以重新设计了一个新的,以2020铝型材做导轨的滑轨,目前2020做滑轨已经很成熟了,配件也都非常便宜&#x…

如何使用Get进行状态管理

文章目录 1. 概念介绍2. 思路与方法2.1 实现思路2.2 相关组件3. 示例代码4. 内容总结我们在上一章回中介绍了"使用get进行依赖管理"相关的内容,本章回中将介绍如何使用get进行状态管理一.闲话休提,让我们一起Talk Flutter吧。 1. 概念介绍 在Flutter开发中状态管理…

计算机视觉常用数据集Cityscapes的介绍、下载、转为YOLO格式进行训练

我在寻找Cityscapes数据集的时候花了一番功夫,因为官网下载需要用公司或学校邮箱邮箱注册账号,等待审核通过后才能进行下载数据集。并且一开始我也并不了解Cityscapes的格式和内容是什么样的,现在我弄明白后写下这篇文章,用于记录…

033_Structure_Static_In_Matlab求解结构静力学问题两套方法

结构静力学问题 静力学问现在是已经很简单的问题,在材料各向同性的情况下,对于弹性固体材料,很容易通过有限元求解。特别是线弹性问题,方程的矩阵形式可以很容易的写出(准确得说是很容易通过有限元表达)&a…

rnn/lstm 项目实战

tip:本项目用到的数据和代码在https://pan.baidu.com/s/1Cw6OSSWJevSv7T1ouk4B6Q?pwdz6w2 1. RNN : 预测股价 任务:基于zgpa_train.csv数据,建立RNN模型,预测股价 1.完成数据预处理,将序列数据转化为可用于RNN输入的数据 2.对新数据zgpa_test.csv进…

jenkins 构建报错 mvn: command not found

首先安装过 maven,并且配置过环境变量 win r ,输入 cmd 键入 mvn -v 出现上图输出,则证明安装成功。 原因 jenkins 没有 maven 配置全局属性, 导致无法找到 mvn 命令。 解决方案 找到全局属性,点击新增,配置 MAVEN_HOME 路…

轮廓图【HTML+CSS+JavaScript】

给大家分享一个很好看的轮播图,这个也是之前看到别人写的效果感觉很好看,所以后面也自己实现了一下,在这里分享给大家,希望大家也可以有所收获 轮播图效果: 视频效果有点浑浊,大家凑合着看,大家…

ChatGPT变AI搜索引擎!以后还需要谷歌吗?

前言 在北京时间11月1日凌晨,正值ChatGPT两岁生日之际,OpenAI宣布推出最新的人工智能搜索体验!具备实时网络功能!与 Google 展开直接竞争。 ChatGPT搜索的推出标志着ChatGPT成功消除了即时信息这一最后的短板。 这项新功能可供 …

Netty 组件介绍 - ByteBuf

直接内存&堆内存 ByteBuf buffer ByteBufAllocator.DEFAULT.heapBuffer(10);ByteBuf byteBuf ByteBufAllocator.DEFAULT.directBuffer(10); 组成 ByteBuf维护了两个不同的索引,一个用于读取,一个用于写入。 写入 内存回收 堆内存使用的是JVM内…