前端请求后端接口报错(blockedmixed-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/pingmian/63720.shtml

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

相关文章

【Golang】Go语言编程思想(六):Channel,第四节,Select

使用 Select 如果此时我们有多个 channel,我们想从多个 channel 接收数据,谁来的快先输出谁,此时应该怎么做呢?答案是使用 select: package mainimport "fmt"func main() {var c1, c2 chan int // c1 and …

SpringBoot【八】mybatis-plus条件构造器使用手册!

一、前言🔥 环境说明:Windows10 Idea2021.3.2 Jdk1.8 SpringBoot 2.3.1.RELEASE 经过上一期的mybatis-plus 入门教学,想必大家对它不是非常陌生了吧,这期呢,我主要是围绕以下几点展开,重点给大家介绍 里…

算法-字符串-32.最长有效括号

一、题目 二、思路解析 1.思路: 滑动窗口!!! 2.常用方法: 无 3.核心逻辑: 1.特殊情况:当字符串为空或不存在 if(snull||s.length()0)return 0; 2.一般情况 a.记录最长有效括符res;初…

CRMEB Pro版v3.2源码全开源+PC端+Uniapp前端+搭建教程

一.介绍 crmeb pro版 v3.2正式发布,全新UI重磅上线,焕然一新,不负期待!页面DIY设计功能全面升级,组件更丰富,样式设计更全面;移动端商家管理,让商城管理更便捷,还从页面…

Java各种排序

快速排序 我们会以最左边的元素作为标准, 从高位取值和他比较,找到高位比他小的元素和low互换,如果比他大则坐标减一继续找 从低位取值找到比他大的元素,和high互换填补到high的位置,如果比他小则继续找 直到low …

MMN模型:服务率,到达率计算公式

MMN模型:服务率,到达率计算公式 即多服务窗排队模型M/M/N,是一种用于分析多个服务窗口(服务员)排队系统的数学模型。在这个模型中,“M”代表顾客到达时间间隔和服务时间均服从指数分布,这是排队论中常用的两种分布类型,用于描述随机事件发生的概率。具体来说,第一个“…

9. Win11上原生运行Ubuntu

本文介绍如何在win11原生系统上运行ubuntu,不需要额外安装虚拟机,以及如何配置网络等。 1.安装正版Win11 由于正版Win11需要钱,网上能破解的win11可能有问题,但是它们的破解工具,却是能正常用的,所以&…

【菜笔cf刷题日常-1800】D. Fun with Integers(数学)

链接&#xff1a;https://codeforces.com/problemset/problem/1062/D 题意&#xff1a;给你一个大于或等于 2 的正整数 n 。对于每一对整数 a 和 b ( 2≤|a|,|b|≤n )&#xff0c;当且仅当存在一个整数 x 使得 1<|x| 和 ( a⋅xb 或 b⋅xa )&#xff0c;其中 |x| 表示 x 的绝…

【CSS in Depth 2 精译_075】12.2 Web 字体简介 + 12.3 谷歌字体的用法

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第四部分 视觉增强技术 ✔️【第 12 章 CSS 排版与间距】 ✔️ 12.1 间距设置 12.1.1 使用 em 还是 px12.1.2 对行高的深入思考12.1.3 行内元素的间距设置 12.2 Web 字体 ✔️12.3 谷歌字体 ✔️12.…

【学习笔记】目前市面中手持激光雷达设备及参数汇总

手持激光雷达设备介绍 手持激光雷达设备是一种利用激光时间飞行原理来测量物体距离并构建三维模型的便携式高科技产品。它通过发射激光束并分析反射回来的激光信号&#xff0c;能够精确地获取物体的三维结构信息。这种设备以其高精度、适应各种光照环境的能力和便携性&#xf…

Python+OpenCV系列:图像的运算

文章目录 PythonOpenCV系列&#xff1a;图像的加权和、覆盖1. 图像加权和&#xff08;加权融合&#xff09;2. 图像覆盖&#xff08;区域叠加&#xff09;3. 应用场景4. 总结 PythonOpenCV系列&#xff1a;图像的加权和、覆盖 在图像处理中&#xff0c;图像的加权和与覆盖是两…

SQL汇总数据:聚集函数

我们经常需要汇总数据而无需实际检索出这些数据&#xff0c;为此SQL提供了专门的函数。使用这些函数&#xff0c;SQL查询能够高效地检索数据&#xff0c;以便进行分析和报表生成。这类检索的例子包括&#xff1a; 确定表中行数&#xff08;或者满足某个条件或包含某个特定值的…

Midjourney基础教程-功能界面详解

基础入门教程&#xff1a; 一.Midjourney快速入门(3步画出你的第一张图&#xff09; 注&#xff1a; 1.平台为大家设置了自动翻译&#xff0c;可以直接写中文提示词&#xff0c;自动翻译成英文。当然要求更准确&#xff0c;大家可以先翻译成英 文在输入进来。 2.提示词如何去…

AWS云计算问答式知识库系统的实现

AWS平台上建立一个生成式人工智能专业文文档问答式网站&#xff0c;前端用Flask框架&#xff0c;后端用Fast API&#xff0c;前端调用后端的唯一API来完成大模型文档搜索的功能&#xff0c;使用AWS Bedrock里的Titan和Llama3模型&#xff0c;以及OpenAI 4.0 API来调用模型并提供…

初识Linux · 日志编写

目录 前言&#xff1a; 日志的简单说明 编写日志 前言&#xff1a; 在线程池部分我们纵观全文&#xff0c;可以发现全文有很多很多的IO流&#xff0c;看起来还是差点意思的&#xff0c;而我们今天提到的日志&#xff0c;是在今后的代码编写中会经常接触&#xff0c;或者说在…

微信小程序做电子签名功能

文章目录 最近需求要做就记录一下。 人狠话不多&#xff0c;直接上功能&#xff1a; 直接搂代码吧,复制过去就可以用&#xff0c;有其他需求自己改吧改吧。 signature.wxml <!-- 电子签名页面 --> <custom-navbar title"电子签名"show-home"{{fals…

【HarmonyOS】使用AVPlayer播放音乐,导致系统其它应用音乐播放暂停 - 播放音频焦点管理

【HarmonyOS】使用AVPlayer播放音乐&#xff0c;导致系统其它应用音乐播放暂停 - 播放音频焦点管理 一、前言 在鸿蒙系统中&#xff0c;对于音乐播放分为几种场景。音乐&#xff0c;电影&#xff0c;音效&#xff0c;闹钟等。当使用AVPlayer播放音乐时&#xff0c;如果不处理…

API接口安全:保障电商数据不被泄露的关键

在当今的数字化时代&#xff0c;电子商务&#xff08;电商&#xff09;已成为全球商业活动的重要组成部分。随着电商平台的日益增多和用户数据的海量积累&#xff0c;数据安全问题也日益凸显。API&#xff08;应用程序编程接口&#xff09;作为电商平台与外部系统交互的桥梁&am…

金融机构远程办公面临的安全挑战

当前&#xff0c;金融机构的业务模式、IT架构都发生了深刻变化。在建设远程办公系统时&#xff0c;金融机构需要面对以下几个方面的挑战&#xff1a; 如何实现“边界模糊化”网络环境下的安全接入&#xff1f; 随着金融机构基础设施云化、业务互联网化和办公移动化&#xff0…

Linux中inode、软硬连接

磁盘的空间管理 如何对磁盘空间进行管理&#xff1f; 假设在一块大小为500G的磁盘中&#xff0c;500*1024*1024524288000KB。在磁盘中&#xff0c;扇区是磁盘的基本单位&#xff08;一般大小为512byte&#xff09;&#xff0c;而文件系统访问磁盘的基本单位是4KB&#xff0c;因…