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

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

2022-11-13 1401
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【报错解决】【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 HTTP
vue后端
后端跨域
萌狼蓝天
目录
相关文章
龙大吉
|
2月前
|
前端开发 API UED
Python后端与前端交互新纪元：AJAX、Fetch API联手，打造极致用户体验！
Python后端与前端交互新纪元：AJAX、Fetch API联手，打造极致用户体验！
龙大吉
86 2
热爱技术的小郑
|
3月前
|
JavaScript NoSQL Redis
Vue中实现修改邮箱、手机号等流程的大致过程、验证码由后端的redis生成验证（版本1.0）
这篇文章记录了在Vue中实现修改手机号和邮箱的大致流程，包括使用过滤器部分隐藏展示的手机号和邮箱，以及通过点击触发路由跳转的便捷方式。文章还描述了旧号码和新号码验证的界面实现，其中验证码由后端生成并通过弹窗展示给用户，未来可以接入真正的手机验证码接口。此外，还提供了修改邮箱的页面效果截图，并强调了学习是一个永无止境的过程。
热爱技术的小郑
42 0
Vue中实现修改邮箱、手机号等流程的大致过程、验证码由后端的redis生成验证（版本1.0）
土木林森
|
3月前
|
前端开发 JavaScript API
解锁高效应用构建：Vuex与后端交互的前端状态同步策略，让数据流动如行云流水，紧跟前端开发的热点趋势
【8月更文挑战第27天】本文深入探讨了Vue框架下的前端状态管理库Vuex与后端服务交互时的状态同步策略。通过剖析Vuex的核心机制——状态(State)、变异(Mutation)、动作(Action)及模块(Module)，文章展示了如何优雅地将后端数据加载并更新至前端状态中。特别地，借助示例代码解释了Action处理API调用、Mutation更新状态的过程，并介绍了如何通过模块化和命名空间提高状态管理的准确性和时效性。此外，还讨论了组件如何利用`mapState`和`mapActions`简化状态访问与操作的方法。遵循这些策略，开发者可以在构建复杂应用时显著提升性能与用户体验。
土木林森
46 0
游客moiomvrp3vyac2
|
9天前
|
存储 SQL API
探索后端开发：构建高效API与数据库交互
【10月更文挑战第36天】在数字化时代，后端开发是连接用户界面和数据存储的桥梁。本文深入探讨如何设计高效的API以及如何实现API与数据库之间的无缝交互，确保数据的一致性和高性能。我们将从基础概念出发，逐步深入到实战技巧，为读者提供一个清晰的后端开发路线图。
游客moiomvrp3vyac2
28 10
刘大猫.
|
19天前
|
前端开发 JavaScript 数据库
https页面加载http资源的解决方法
https页面加载http资源的解决方法
刘大猫.
36 4
qa浪涛
|
1月前
|
JavaScript 前端开发 API
vue获取图片的blob传给django后端
vue获取图片的blob传给django后端
qa浪涛
35 4
dream_ready
|
1月前
|
前端开发 Java
学习SpringMVC，建立连接，请求，响应 SpringBoot初学，如何前后端交互(后端版)？最简单的能通过网址访问的后端服务器代码举例
文章介绍了如何使用SpringBoot创建简单的后端服务器来处理HTTP请求，包括建立连接、编写Controller处理请求，并返回响应给前端或网址。
dream_ready
53 0
学习SpringMVC，建立连接，请求，响应 SpringBoot初学，如何前后端交互(后端版)？最简单的能通过网址访问的后端服务器代码举例
刘大猫.
|
2月前
|
前端开发 JavaScript 数据库
https页面加载http资源的解决方法
https页面加载http资源的解决方法
刘大猫.
172 7
六卿
|
2月前
|
前端开发 JavaScript
node反向代理，解决跨域（http-proxy-middleware）
使用node.js和http-proxy-middleware库实现反向代理，解决跨域问题，允许前端请求通过代理访问不同端口的服务。
六卿
102 3
java冯坚持
|
1月前
|
前端开发 JavaScript Java
导出excel的两个方式：前端vue+XLSX 导出excel，vue+后端POI 导出excel，并进行分析、比较
这篇文章介绍了使用前端Vue框架结合XLSX库和后端结合Apache POI库导出Excel文件的两种方法，并对比分析了它们的优缺点。
java冯坚持
235 0

热门文章

最新文章

  • 1
    前端，测试如何修改后端接口返回的响应数据
  • 2
    购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端，以及前后端Session
  • 3
    【nodejs】让nodejs像后端mvc框架（asp.net mvc ）一样处理请求--路由限制及选择篇（2/8）【route】
  • 4
    Dubbo Triple 协议重磅升级：支持通过 HTTP 连通 Web 与后端微服务
  • 5
    后端码农谈前端（CSS篇）第七课：定位与浮动
  • 6
    微信小程序：获取不限制的小程序码后端Java实现
  • 7
    后端程序员就靠它吃饭了，推荐一份夯实基础的操作系统书单！
  • 8
    「后端小伙伴来学前端了」Vue集成 Element-tiptap 富文本编辑器
  • 9
    【nodejs】让nodejs像后端mvc框架（asp.net mvc）一样处理请求--控制器和处理函数的注册篇（4/8）【controller+action】
  • 10
    找到MVC框架中前端URL与后端同步的解决方案
  • 1
    Android 深入Http（5）从Retrofit源码来看Http，最新Android开发面试解答
    51
  • 2
    http协议 报文 给你讲明白咯，web开发基础
    32
  • 3
    Android-音视频学习系列-(八)基于-Nginx-搭建(rtmp、http)直播服务器
    109
  • 4
    探索HTTP协议：网络通信的基石
    66
  • 5
    第十一篇 前沿趋势与展望：深入探索GraphQL、RESTful API、WebSocket、SSE及QUIC与HTTP/3
    108
  • 6
    第八篇 提升网页性能：深入解析HTTP请求优化策略（三）
    172
  • 7
    第七篇 提升网页性能：深入解析HTTP请求优化策略（二）
    196
  • 8
    第六篇 提升网页性能：深入解析HTTP请求优化策略（一）
    77
  • 9
    第三章 前端发起HTTP请求
    54
  • 10
    第二章 HTTP请求方法、状态码详解与缓存机制解析
    114

    • 相关课程

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

    • 相关电子书

    更多
  • 十分钟上线-使用函数计算构建支付宝小程序服务
  • CDN助力企业网站进入HTTPS时代
  • 机器学习在互联网后端技术中的应用

    • 相关实验场景

    更多
  • 通过轻量消息队列（原MNS）主题HTTP订阅+ARMS实现自定义数据多渠道告警
  • 通过HTTPS加速网关快速部署网站加密
    • 下一篇
    阿里云OSS设置跨域访问