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

最新推荐文章于 2024-07-20 16:46:53 发布
最新推荐文章于 2024-07-20 16:46:53 发布
阅读量4.5k 收藏 2
点赞数 1
分类专栏： 【萌狼原创】疑难杂症攻破笔记 文章标签： vue.js 前端 javascript ecmascript 前端框架
原创文章谢绝转载！不允许搬运！不授权任何人！
本文链接：https://blog.csdn.net/ks2686/article/details/125157920
版权

问题

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">

注意

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

萌狼蓝天
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
vue怎么和python后端交互_Vue - 与后端交互
weixin_30956665的博客
02-05 6486
零：与后端交互 - ajax版本1 - 出现了跨域问题前端：index.htmlhtml>Vue与后端交互-出现了跨域问题加载数据letvm=newVue({el:'#box',data:{},methods:{handleClick(){$.ajax({url:'http://127.0.0.1:5000/',//发送请求的url，本地的5000端口，是flask的...
SpringBoot与Vue交互解决跨域问题【亲测已解决】
m0_65634190的博客
12-30 3337
最近在利用springboot+vue整合开发一个前后端分离的个人博客网站，所以这一篇总结一下在开发中遇到的一个问题，**关于解决在使用vue和springboot在开发前后端分离的项目时，如何解决跨域问题。在这里分别分享两种方法，分别在`前端vue中解决`和在`后台springboot中解决`。**
[跨域问题]使用https调用http接口时,会阻拦的错误提示,解决方案如下
AsiWorld的博客
06-10 7361
问题描述 最近在使用vue做前端,调用后端的登录接口,但是前后端分离+cookie登录状态判断就会产生超级难搞的问题,首当其冲的就是解决安全证书的问题 于是我使用了vue的https devserver选项做了一个非安全证书的https 但是当我调用http登录接口的时候发现报错了 具体内容如下 edge 报错 Mixed Content: The page at ‘https://localhost:8080/’ was loaded over HTTPS, but requested an ins
火狐浏览器能用 谷歌出现This request has been blocked； the content must be served over HTTPS解决方法
m0_66466770的博客
05-07 461
方法二：在nginx配置响应头（add_header Content-Security-Policy upgrade-insecure-requests;方法一：在页面添加（本人没成功）
Vue3：解决基地址不同 数据交互http与https跨域问题
米拉
11-06 1129
配置公共管理的api文件和vue.config.js可以解决跨域问题。一个项目对接不同的基地址和接口同理。去除api和vue.config.js里 http: 和 https: 不会报跨域但是有。不修改api和vue.config.js，在index.html的head中中添加。基地址对应不同的http协议（http和https），线上项目会报跨域。
解决Vue前端和后端对接的跨域问题
david2000999的博客
10-24 4012
解决前端配置 首先如果是开发环境下，直接在config文件夹下的index.js中的dev:{}中加入代理配置即可，我前端启动的路径是localhost：8080，后端访问路径是http://127.0.0.1:8081/overseas，这样就可以实现跨域的转发了。 proxyTable: { '/overseas': { target: 'http://127.0.0.1:8081/overseas', // target: 'http://192.168.
Vue - 与后端交互
wuzeipero的博客
12-16 4560
Vue - 与后端交互零：与后端交互 - ajax版本1 - 出现了跨域问题版本2 - 解决了跨域问题版本3 - 后端读取json文件传到前端一：fetch1.简介2.实例二：Axios1.简介2.实例三：计算属性1.通过计算属性实现名字首字母大写2.通过计算属性重写过滤案例四：虚拟DOM 与diff算法 key的作用1.Vue2.0 v-for 中 :key 有什么用呢？2.虚拟DOM的diff算法3.具体实现思考：什么是跨域问题？如何解决？ 零：与后端交互 - ajax 版本1 - 出现了跨域问题 前端
springboot和vue交互产生跨域问题的解决办法（后端解决方法）
秋名山码民的技术小屋
12-13 758
hi，大家好，我是左手写helloworld，右手写bug的秋名山码民！今天在利用整合开发一个网站的时候出现了bug，总结一下在开发中遇到的一个问题，关于解决在使用vue和springboot在开发前后端分离的项目时，如何。
解决Springboot+VUE项目部署出现的跨域问题
cheng5055251的博客
08-04 1834
自己写了一个项目，写好了，发现不会部署，然后到处查资料，最终终于部署好自己写的系统，系统为前后端分离项目。需要分别部署在同一个服务器docker中，配置不同得端口隐射，部署得过程中主要是跨域问题，导致在前端部署得vue项目访问不了后端数据。下面先进行前端部署。
从零创建VUE注册页面实现与后端交互
m0_50302965的博客
10-31 989
创建文件夹 在地址栏输入cmd 安装VUE 查看vue 版本 创建vue项目 vue使用vue create 或者vue init创建项目如果速度太慢，可以更换npm的源 有的时候卡在那 按ctrl +c 跳到可以选择版本的位置 选择自定义 项目 回车 进去后 方向键选择Vuex +Router 按空格键选择
详解vue与后端数据交互(ajax)：vue-resource
08-31
总结，Vue-resource提供了丰富的API，方便Vue应用与后端进行数据交互，包括GET、POST和JSONP请求。这些功能使得开发者无需离开Vue的生态系统就能轻松地处理与服务器的数据交换，提高了开发效率。在实际项目中，还...
vue结合axios与后端进行ajax交互的方法
08-27
"Vue 结合 Axios 与后端进行 AJAX 交互的方法" 在现代 Web 开发中，前端与后端的交互是至关重要的一步。 Vue.js 作为一个流行的前端框架，结合 Axios 库可以实现与后端的 AJAX 交互。本文将介绍 Vue 结合 Axios 与...
vue+Java后端进行调试时解决跨域问题的方式
08-29
今天在开发中遇到有点小问题，vue+Java后端进行调试时如何解决跨域问题，下面小编给大家分享解决方法，感兴趣的朋友一起看看吧
谷粒商城实战笔记-38-前端基础-Vue-指令-单向绑定&双向绑定
最新发布
epitomizelu的专栏
07-20 507
安全性v-text更安全，因为它总是将数据作为纯文本插入，不解析 HTML。v-html则可能引发安全问题，因为它会解析并渲染 HTML 标签。用途v-text适用于插入文本数据，而v-html适用于插入需要被解析为实际 HTML 的数据。处理 HTML 标签v-text忽略 HTML 标签，将其视为普通文本；v-html则会解析并显示 HTML 标签。二者都是单向绑定，元素绑定model，model不绑定元素，元素值改变时model值不会更新。
使用Vue实现点击页面触发特效
qq_45569925的博客
07-19 645
在页面上的指定区域内进行点击，则会在页面上显示设置好的随机文本，此文本出现后会执行动画，动画效果为节点在1s之内向右上方移动并在移动的过程中完成180°翻转，最后消失。
Django+vue自动化测试平台（28）-- ADB获取设备信息
测试小老弟的博客
07-17 341
adb的全称为Android Debug Bridge，就是起到调试桥的作用。通过adb可以在Eclipse中通过DDMS来调试Android程序，说白了就是调试工具。adb的工作方式比较特殊，采用监听Socket TCP 5554等端口的方式让IDE和Qemu通讯，默认情况下adb会daemon相关的网络端口，所以当我们运行Eclipse时adb进程就会自动运行。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1064
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
vue图片存放在public目录和src/assets目录下的区别
Zing_ing的博客
07-19 477
使用随时要更换的图片，有更新动态显示的需求，像banner、轮播、广告、展示性等大型图片放在public下比较合适；而一些icon、精灵图、雪碧图更适合放在assets下。如果图片不需要被处理，比如网站的结构用图，如logo图片，则放public中，否则如内容图片或者需要被构建为base64的小图标可以放assets中。
SpringBoot与Vue交互解决跨域问题帮我解决
06-10
好的，下面是解决 Spring Boot 与 Vue 跨域问题的一种方法。 首先，在 Spring Boot 的后端代码里，我们需要在 Controller 上添加 `@CrossOrigin` 注解，来允许跨域访问。示例代码如下： ```java @RestController @CrossOrigin(origins = "*", maxAge = 3600) public class HelloController { @GetMapping("/hello") public String hello() { return "Hello, world!"; } } ``` 其中 `@CrossOrigin(origins = "*", maxAge = 3600)` 表示允许所有来源的跨域访问，并设置了缓存时间为 3600 秒。 然后，在 Vue 的前端代码里，我们需要在 Axios 请求中设置 `withCredentials: true`，来开启跨域请求。示例代码如下： ```javascript axios.get('http://localhost:8080/hello', { withCredentials: true }) .then(response => { console.log(response.data) }) .catch(error => { console.log(error) }) ``` 其中 `withCredentials: true` 表示允许发送跨域凭证，例如 Cookie 等。 最后，在 Spring Boot 的后端代码里，我们需要添加一个 Filter，来允许前端发送跨域凭证。示例代码如下： ```java @Configuration public class CorsConfig { @Bean public FilterRegistrationBean corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); CorsConfiguration config = new CorsConfiguration(); config.setAllowCredentials(true); config.addAllowedOrigin("*"); config.addAllowedHeader("*"); config.addAllowedMethod("*"); source.registerCorsConfiguration("/**", config); FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source)); bean.setOrder(Ordered.HIGHEST_PRECEDENCE); return bean; } } ``` 其中 `config.setAllowCredentials(true)` 表示允许发送跨域凭证。 以上就是解决 Spring Boot 与 Vue 跨域问题的一种方法，希望能够帮到您。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

萌狼蓝天

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值