AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

【报错解决】【Vue】与后端交互时，http与https跨域问题

2022-11-13 1916
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【报错解决】【Vue】与后端交互时，http与https跨域问题问题

问题

q1.png

xhr.js:220 Mixed Content: The page at 'https://xxx' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://xxx'. This request has been blocked; the content must be served over HTTPS.

场景

Vue前端，Java后端，网站开启了强制https

上传项目后发生了以上报错。

解决方法

在index.html文件中添加


<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

注意

我后端早就写了对跨域问题的处理的

文章标签：
Java
JavaScript
前端开发
关键词：
HTTP https
报错HTTPS
后端跨域
vue后端
HTTP跨域
萌狼蓝天
目录
相关文章
高端源码库
|
8月前
|
JavaScript 前端开发 Java
制造业ERP源码，工厂ERP管理系统，前端框架：Vue，后端框架：SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统，采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能，整合客户与供应商数据，支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能，助力企业实现高效自动化管理，并通过UniAPP实现移动端支持，满足多场景应用需求。
高端源码库
793 1
热爱技术的小郑
|
JavaScript NoSQL Redis
Vue中实现修改邮箱、手机号等流程的大致过程、验证码由后端的redis生成验证（版本1.0）
这篇文章记录了在Vue中实现修改手机号和邮箱的大致流程，包括使用过滤器部分隐藏展示的手机号和邮箱，以及通过点击触发路由跳转的便捷方式。文章还描述了旧号码和新号码验证的界面实现，其中验证码由后端生成并通过弹窗展示给用户，未来可以接入真正的手机验证码接口。此外，还提供了修改邮箱的页面效果截图，并强调了学习是一个永无止境的过程。
热爱技术的小郑
221 0
Vue中实现修改邮箱、手机号等流程的大致过程、验证码由后端的redis生成验证（版本1.0）
嘟嘟嘟嘟嘟嘟
|
SQL 分布式计算 DataWorks
DataWorks操作报错合集之遇到报错：HTTP状态码400，该如何处理
DataWorks是阿里云提供的一站式大数据开发与治理平台，支持数据集成、数据开发、数据服务、数据质量管理、数据安全管理等全流程数据处理。在使用DataWorks过程中，可能会遇到各种操作报错。以下是一些常见的报错情况及其可能的原因和解决方法。
嘟嘟嘟嘟嘟嘟
602 0
涛7453243251
|
JavaScript 前端开发 API
vue获取图片的blob传给django后端
vue获取图片的blob传给django后端
涛7453243251
303 4
想飞的雪糕
|
存储 前端开发 NoSQL
拿下奇怪的前端报错（四）：1比特丢失导致的音视频播放时长无限增长-浅析http分片传输核心和一个坑点
在一个使用MongoDB GridFS存储文件的项目中，音频和视频文件在大部分设备上播放时长显示为无限，而单独播放则正常。经调查发现，问题源于HTTP Range请求的处理不当，导致最后一个字节未被正确返回。通过调整请求参数，使JavaScript/MongoDB的操作范围与HTTP Range一致，最终解决了这一问题。此案例强调了对HTTP协议深入理解及跨系统集成时注意细节的重要性。
想飞的雪糕
342 0
java冯坚持
|
前端开发 JavaScript Java
导出excel的两个方式：前端vue+XLSX 导出excel，vue+后端POI 导出excel，并进行分析、比较
这篇文章介绍了使用前端Vue框架结合XLSX库和后端结合Apache POI库导出Excel文件的两种方法，并对比分析了它们的优缺点。
java冯坚持
2924 0
热爱技术的小郑
|
前端开发 Java
后端BUG系列之：SpringBoot上传文件太大 报错 Maximum upload size exceeded
这篇文章讨论了SpringBoot应用中上传文件过大导致的错误"Maximum upload size exceeded"，并提供了通过修改`application.properties`文件中的上传限制配置来解决这个问题的方法。
热爱技术的小郑
3141 1
热爱技术的小郑
|
JavaScript 前端开发
Vue中传递自定义参数到后端、后端获取数据（使用Map接收参数）
这篇文章讲述了如何在Vue中通过Axios二次封装传递自定义参数到后端，并展示了后端如何使用Map接收这些参数，以及如何避免参数转换错误和统一接口设计的方法。
热爱技术的小郑
1301 1
土木林森
|
前端开发 Java Spring
Spring与Angular/React/Vue：当后端大佬遇上前端三杰，会擦出怎样的火花？一场技术的盛宴，你准备好了吗？
【8月更文挑战第31天】Spring框架与Angular、React、Vue等前端框架的集成是现代Web应用开发的核心。通过RESTful API、WebSocket及GraphQL等方式，Spring能与前端框架高效互动，提供快速且功能丰富的应用。RESTful API简单有效，适用于基本数据交互；WebSocket支持实时通信，适合聊天应用和数据监控；GraphQL则提供更精确的数据查询能力。开发者可根据需求选择合适的集成方式，提升用户体验和应用功能。
土木林森
362 0
别惹CC
|
6月前
|
人工智能 Java API
后端开发必看：零代码实现存量服务改造成MCP服务
本文介绍如何通过 **Nacos** 和 **Higress** 实现存量 Spring Boot 服务的零代码改造，使其支持 MCP 协议，供 AI Agent 调用。全程无需修改业务代码，仅通过配置完成服务注册、协议转换与工具映射，显著降低改造成本，提升服务的可集成性与智能化能力。
别惹CC
1827 1

热门文章

最新文章

  • 1
    AngularJS 用 $http.jsonp 跨域SyntaxError问题
  • 2
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head><meta http-equiv="Cont
  • 3
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head><meta http-equiv="Cont
  • 4
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head><meta http-equiv="Cont
  • 5
    黄聪：如何使用CodeSmith批量生成代码(转：http://www.cnblogs.com/huangcong/archive/2010/06/14/1758201.html)
  • 6
    tp5使用ueditor请求后台配置项http错误,上传功能将不能正常使用!
  • 7
    掌握 HTTP 请求的艺术：理解 cURL GET 语法
  • 8
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head><meta http-equiv="Cont
  • 9
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head><meta http-equiv="Cont
  • 10
    Java网络编程从入门到精通（22）：实现HTTP模拟器
  • 1
    我尝试了所有后端框架 — — 这就是为什么只有 Spring Boot 幸存下来
    363
  • 2
    实现“永久登录”：针对蜻蜓Q系统的用户体验优化方案（前端uni-app+后端Laravel详解）-优雅草卓伊凡
    243
  • 3
    专业打造一款圈子源码软件系统 / 后端 PHP 搭建部署一样实现利益化
    465
  • 4
    后端开发必看：零代码实现存量服务改造成MCP服务
    1827
  • 5
    低并发编程｜如何用720个请求让后端服务器瘫痪
    142
  • 6
    构建高效可扩展的后端架构：从设计到实现
    469
  • 7
    后端开发中的错误处理实践：原则与实战
    304
  • 8
    开箱即用的 GoWind Admin｜风行，企业级前后端一体中后台框架：后端项目结构说明
    326
  • 9
    开箱即用的 GoWind Admin｜风行，企业级前后端一体中后台框架：后端权限控制
    603
  • 10
    一夜获千星！已获 1.7k+,Art Design Pro：Vue3 + Vite + TypeScript 打造的高颜值管理系统模板，这个让后端小哥直呼救命的后台系统
    1351

    • 相关课程

    更多
  • Java Web开发-Web应用、Tomcat、HTTP请求与响应
  • 云安全基础课- HTTP协议基础

    • 相关电子书

    更多
  • 阿里巴巴HTTP 2.0实践及无线通信协议的演进之路
  • 十分钟上线-使用函数计算构建支付宝小程序服务
  • 机器学习在互联网后端技术中的应用

    • 相关实验场景

    更多
  • 通过轻量消息队列（原MNS）主题HTTP订阅+ARMS实现自定义数据多渠道告警
    • 下一篇
    基于JAVA的高校宿舍管理系统的设计与实现(论文+源码)_kaic