前端请求后端接口报错(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,一经查实,立即删除!

相关文章

wordpress argon主题美化方面

1、页面前端额外CSS: /*字体*/ font-face {font-family: myFont1; src:url(https://blog.yangmumu.com/css/fonts/Dancing.ttf) ;font-display: swap; } font-face {font-family: myFont2; src:url(https://blog.yangmumu.com/css/fonts/Regular.ttf) ;font-displa…

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属性是一个常见的攻击向量,因为它可以…

git cherry-pick用法详解

git cherry-pick 是 Git 中一个非常有用的命令,它允许你选择一个特定的提交(commit)并将其变更应用到当前分支上。这个功能在你需要将某个分支上的某个或某些特定提交合并到另一个分支时特别有用,而不需要将整个分支合并过去。 基…

【机器学习】回归树

回归树是一种用于数值型目标变量的监督学习算法,通过将特征空间划分为多个区域,并在每个区域内使用简单的预测模型(如区域均值)来进行回归。回归树以“递归划分-计算区域均值”的方式逐层生成树节点,最终形成叶节点预测…

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

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

基于MATLAB的战术手势识别

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

微信小程序app.js里面onLaunch里面的函数比page里面的onshow里面的方法后执行

微信小程序app.js里面onLaunch里面的函数比page里面的onshow里面的方法后执行 我们在app.js里面执行登录时可以调用checkLoginReadyCallback wx.login({ success: (res) > { $api .login({ jsCode: res.code, }) .then((res1) > { wx.hideLoading(); if (res1.code 0) …

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

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

热key总结

什么是热key? 1 、MySQL等数据库会被频繁访问的热数据 如爆款商品的skuId。 2 、redis的被密集访问的key 如爆款商品的各维度信息,skuId、shopId等。 3 、机器人、爬虫、刷子用户 如用户的userId、uuid、ip等。 4 、某个接口地址 如/sku/query或…

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的格式和内容是什么样的,现在我弄明白后写下这篇文章,用于记录…

【干货】如何实现安全的登录系统:从用户登录场景分析 Web 网络安全技术

安全的登录系统 为何不安全 当用户在前端输入密码账号后,要把信息发往服务端完成注册/登录,数据需要经过互联网的“黑暗森林”。 在互联网中, CSRF(跨站伪造请求伪造)、XSS(跨站脚本攻击)、MITM(中间人攻击)、RA(请求重放攻击) 等各种不怀好…