记录:使用springboot的cors和vue的axios进行跨域
一、编写一个配置类,并且注册CorsFilter:
注意允许跨域的域名不要写错
@Configuration
public class ZysuyuanCorsConfiguration { @Bean
public CorsFilter corsFilter() {
// 初始化cors配置对象
CorsConfiguration corsConfiguration = new CorsConfiguration();
// 允许跨域的域名,如果要携带cookie,不能写*,*代表所有域名都可以跨域访问
// corsConfiguration.addAllowedOrigin("http://localhost:10008");
// 本机使用nginx测试
corsConfiguration.addAllowedOrigin("http://localhost:8778");
// corsConfiguration.addAllowedOrigin("http://localhost:8778");
corsConfiguration.setAllowCredentials(true); // 允许携带cookies
corsConfiguration.addAllowedMethod("*"); // 代表所有的请求方法:get、post、put、delete
corsConfiguration.addAllowedHeader("*"); // 允许携带任何头信息 // 初始化cors配置源对象
UrlBasedCorsConfigurationSource configurationSource = new UrlBasedCorsConfigurationSource();
configurationSource.registerCorsConfiguration("/**",corsConfiguration); // 返回corsFilter实例,参数:cors配置源对象
return new CorsFilter(configurationSource);
}
}
二、编写vue的axios请求
注意:如果使用vue2.0中使用axios进行(put,post请求时),遇到415错误(参考:https://www.cnblogs.com/shuaifing/p/7921102.html)
解决办法:在axios的第三个参数config中,设置请求头信息'Content-Type': 'application/json;charset=UTF-8'
insertDevice(query) {
return request({
url: '/item/device/save',
method: 'post',
data: JSON.stringify(query),
headers : {
'Content-Type' : 'application/json;charset=UTF-8' // 注意此处的头信息要写为application/json;charset=UTF-8
}
})
}
补充:
vue中子组件调用父组件的方法(参考:https://juejin.im/post/5c1370365188250f73759a79)
1、$emit方法
父:
@fselect绑定父组件中的searchBydeviceName方法
<add-new
ref="feditForm"
@fselect="searchBydeviceName"
@close="closeEditor"
:isEdit="isEdit"
:addnewData.sync="fpojo"
></add-new>
子组件调用:
记录:使用springboot的cors和vue的axios进行跨域的更多相关文章
- .net core3.1 webapi + vue.js + axios实现跨域
我所要讲述的是,基于.net core3.1环境下的webapi项目,如何去使用axios对接前端的vue项目 既然谈到axios,这里贴出axios的官方文档地址: http://www.axios ...
- 4.vue引入axios同源跨域
前言: 跨域方案有很多种,既然我们用到了Vue,那么就使用vue提供的跨域方案. 解决方案: 1.修改HttpRequestUtil.js import axios from 'axios' expo ...
- vue 使用axios 出现跨域请求的两种解决方法
最近在使用vue axios发送请求,结果出现跨域问题,网上查了好多,发现有好几种结局方案. 1:服务器端设置跨域 header(“Access-Control-Allow-Origin:*”); h ...
- Vue(项目踩坑)_解决vue中axios请求跨域的问题
一.前言 今天在做项目的时候发现axios不能请求跨域接口 二.主要内容 1.之前直接用get方式请求聚合数据里的接口报错如下 2.当前请求的代码 3.解决方法 (1)在项目目录中依次找到:confi ...
- vue.js axios实现跨域http请求接口
跨域post实例,用到了qs组件来避开ajax信使请求,并兼容Android. import axios from 'axios'; import qs from 'qs'; axios.post(' ...
- 前端vue开发中的跨域问题解决,以及nginx上线部署。(vue devServer与nginx)
前言 最近做的一个项目中使用了vue+springboot的前后端分离模式 在前端开发的的时候,使用vue cli3的devServer来解决跨域问题 上线部署则是用的nginx反向代理至后台服务所开 ...
- Vue解决接口访问跨域问题
随手摘录 Vue解决接口访问跨域问题 1.打开 config -> index.js 2. 找到proxyTable 3.粘贴 如下代码,'https://www.baidu.com'换成要访问 ...
- vue.js学习之 跨域请求代理与axios传参
vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...
- Springboot html vue.js 前后分离 跨域 Activiti6 工作流 集成代码生成器 shiro 权限
官网:www.fhadmin.org 特别注意: Springboot 工作流 前后分离 + 跨域 版本 (权限控制到菜单和按钮) 后台框架:springboot2.1.2+ activiti6.0 ...
随机推荐
- iOS7 AVAudioRecorder不能录音
今天写录音代码的时候,在iOS7以下就可以录音,但是iOS7上不可以,后来才知道iOS7录音方式变了,加上下面的代码就可以了,bingo AVAudioSession *audioSession = ...
- 探索NDIS HOOK新的实现方法(1)
NDIS HOOK是专业级防火墙使用的一种拦截技术,NDIS HOOK的重点是如何获得特定协议对应NDIS_PROTOCOL_BLOCK指针,获得了该指针,接下来就可以替换该协议所注册的收发函数,而达 ...
- Centos7.5安装mysql 8.0.11
一.安装前准备 安装采用二进制包方式,软件包8.0.11版本下载地址: https://cdn.mysql.com//Downloads/MySQL-8.0/mysql-8.0.11-linux-gl ...
- due to a StackOverflowError. Possible root causes include a too low setting for -Xss and illegal cyclic inheritance dependencies. The class hierarchy being processed was [org.jaxen.util.AncestorAxisIt
七月 31, 2019 4:39:01 下午 org.apache.catalina.startup.VersionLoggerListener log信息: Server version: Apac ...
- mac的终端运行ifconfig
lo0:loopback回环地址一般是127.0.0.0,loopback指本地环回接口(或地址),亦称回送地址().此类接口是应用最为广泛的一种虚接口,几乎在每台路由器上都会使用. gif0: so ...
- SparkSession、SparkContext、SQLContext和HiveContext之间的区别。
SparkContext 是什么? 驱动程序使用SparkContext与集群进行连接和通信,它可以帮助执行Spark任务,并与资源管理器(如YARN 或Mesos)进行协调. 使用SparkCont ...
- springboot + ajax + mybatis 实现批量删除
实现思路: 1. checkbox全选获取批量删除的id数组 2. ajax以字符串的形式将id数组传给控制器 3. 控制器将字符串分割成List数组作为参数传给mapper 具体代码: 1. 前端代 ...
- Nginx常用功能配置二
Nginx常用功能配置二 Nginx location匹配设置 location作用:可以根据用户请求的URI来执行不同的应用,根据用户请求的网站的地址URL匹配. location语法: locat ...
- 结对编程收获-Core10组-PB16110698
本周结对编程追加作业:记录收获.坦白说,我的收获多而杂,一时不知从何说起,以下试图从各方面简要谈谈. 一.编程能力收获 从编程能力方面,我收获的主要是类的设计思路和算法设计.在作业要求blog的指引下 ...
- arm-linux-gcc 的使用
1. 编译 C 文件,生成 elf 可执行文件 h1.c 源文件 #include <stdio.h> void hellofirst(void) { printf("The f ...