前端请求后端接口报错(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.设置浏览器允许不安全的访问,简单设置:设置为允许就好了

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

python 包和模块

一、模块 一个.py 文件就是一个模块,模块是含有一系列数据,函数,类等的程序。 1、模块导入 1.1、impotrt 模块名称 [ as 别名] import nunpy as np 1.2、form 模块名 import 模块内属性名 [ as 别名] from datetime import datetime as d…

Git下载-连接码云-保姆级教学(连接Gitee失败的解决)

Git介绍 码云连接 一、Git介绍 二、Git的工作机制 下载链接:Git - 下载软件包 三、使用步骤 创建一个wss的文件夹,作为‘工作空间’ 四、连接码云账号 五、连接Gitee失败的解决方法 一、Git介绍 Git是一个免费的、开源的分布式版本控制…

https和http的区别,及HTTPS的工作流程

HTTP(HyperText Transfer Protocol)和HTTPS(HyperText Transfer Protocol Secure)都是超文本传输协议,但它们之间的关键区别在于安全性。 安全性: HTTP:数据以明文传输,没有加密&…

【Python · Pytorch】人工神经网络 ANN(上)

【Python Pytorch】人工神经网络 ANN(上) 0. 生物神经网络1. 人工神经网络定义2. 人工神经网络结构2.1 感知机2.2 多层感知机2.3 全连接神经网络2.4 深度神经网络 2. 训练流程※ 数据预处理 (Data Preprocessing) 3. 常见激活函数3.1 Sigmoid / Logisti…

基本查询【MySQL】

文章目录 基本查询插入时是否更新替换查询指定列查询查询字段为表达式为查询结果指定别名结果去重where条件NULL 的查询 结果排序筛选分页结果UpdateDelete截断表聚合函数分组(group by)having && where 基本查询 建表 mysql> create table Student (-> id int…

pandas——数据结构

一、series (一)创建series import pandas as pd#1.使用列表或数组创建Series # 使用列表创建Series,索引默认从0开始 s1 pd.Series([1, 2, 3]) print(s1) # 使用列表和自定义索引创建Series s2 pd.Series([1, 2, 3], index[a, b, c]) pr…

算法妙妙屋-------1.递归的深邃回响:C++ 算法世界的优雅之旅

前言: 递归是一种在算法中广泛应用的思想,其主体思想是通过将复杂的问题分解为更简单的子问题来求解。具体而言,递归通常包括以下几个要素: 基本情况(Base Case):每个递归算法必须有一个或多个…

禾川HCQ1控制器程序编译报错如何解决

1、第一次打开用户程序 2、提示库未安装 3、安装库文件 4、脉冲轴库未安装 5、没有错误 去禾川自动化官网,把可以安装的包和库都安装下,程序编译就没有错误了。 6、下载相关包文件

HarmonyOS:@Watch装饰器:状态变量更改通知

Watch应用于对状态变量的监听。如果开发者需要关注某个状态变量的值是否改变,可以使用Watch为状态变量设置回调函数。 说明 从API version 9开始,该装饰器支持在ArkTS卡片中使用。 从API version 11开始,该装饰器支持在元服务中使用。 一、概…

Windows如何查看自己网卡的MAC地址?

本章教程,主要介绍如何在Windows查看自己的网卡mac地址。 一、查询MAC地址方法 打开使用PowerShell,运行以下命令即可查询到自己的网卡MAC地址。 Get-NetAdapter | Select-Object Name, MacAddress二、MAC地址是什么 MAC地址(Media Access Co…

Unknown at rule @tailwindscss(unknownAtRules)

一、前言 整合 tailwindcss 后,发现指令提示警告 Unknown at rule tailwindscss(unknownAtRules),其实是 vscode 无法识别 tailwindscss 指令,不影响使用,但是对于我这种有编程洁癖的人来说,有点膈应。 二、解决方案…

Python 实现深度学习模型预测控制--预测模型构建

链接:深度学习模型预测控制 (如果认为有用,动动小手为我点亮github小星星哦),持续更新中…… 链接:WangXiaoMingo/TensorDL-MPC: DL-MPC(deep learning model predictive control) is a software toolkit…

安宝特案例 | AR技术在院外心脏骤停急救中的革命性应用

00 案例背景 在院外心脏骤停 (OHCA) 的突发救援中,时间与效率直接决定着患者的生命。传统急救模式下,急救人员常通过视频或电话与医院医生进行沟通,以描述患者状况并依照指令行动。然而,这种信息传递方式往往因信息不完整或传递延…

书生大模型第一关Linux基础知识

任务一:完成SSH连接与端口映射并运行hello_world.py 1.SSH及其端口映射 2.在VSCode中安装插件: 3.创建开发机 最后点击创建,然后可能需要等待一段较长的时间,大概需要5分钟左右,如果需要排队则更长时间 然后选择…

openGauss数据库-头歌实验1-5 修改数据库

一、查看表结构与修改表名 (一)任务描述 本关任务:修改表名,并能顺利查询到修改后表的结构。 (二)相关知识 为了完成本关任务,你需要掌握: 1.如何查看表的结构; 2.如…

【机器学习】26. 聚类评估方法

聚类评估方法 1. Unsupervised Measure1.1. Method 1: measure cohesion and separationSilhouette coefficient Method 2:Correlation between two similarity matricesMethod 3:Visual Inspection of similarity matrix 2. Supervised measures3. 决定…

基于stm32单片机的智能循迹小车

功能描述 STM32单片机循迹避障蓝牙控制温度采集烟雾采集火焰探测声光报警按键调节OLED显示 1. STM32单片机为控制核心 2. 通过ds18b20传感器测量环境温度 3. 通过mq-2烟雾传感器测量环境中的烟雾浓度 4. 温度阈值和烟雾浓度阈值可以通过按键进行调节 5. 当温度或者烟雾浓度超过…

【图解版】力扣第70题:爬楼梯

推理出状态表达式 f(5)表示到达第5层,所有可能的方法数。 到达第5层,有可能是从第4层走一步上来,也有可能是从第3层走两步上来。所以我们可以慢慢延伸,画出上面👆🏻的图。 从图中,我们可以看到…

MySQL基础(三)

目录 一. 插入内容insert 1.1 默认插入 1.2 指定某些列插入数据 1.3 一次插入多行 1.4 insert 插入时间 二. 查询数据select(比较复杂) 2.1 全列查询 2.2 指定列查询 2.3 查询字段为表达式 2.4 别名 as 2.5 去重查询 distinct 2.6 排序…

OpenAI 的 Whisper:盛名之下,其实难副?

OpenAI 的 Whisper:盛名之下,其实难副? Whisper 的崛起与承诺 严重缺陷的曝光 风险分析 应对措施 结论 在人工智能的浪潮中,OpenAI 一直以其创新性和强大的技术实力备受瞩目。然而,最近 OpenAI 的语音转写工具 Wh…