记录：使用springboot的cors和vue的axios进行跨域

1、编写一个配置类，而且注册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); } }

 

 

 2、编写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中子组件调用父组件的方法（参考：http://www.javashuo.com/article/p-mzsoikxx-gw.html）

一、$emit方法

父：

@fselect绑定父组件中的searchBydeviceName方法

 <add-new ref="feditForm" @fselect="searchBydeviceName" @close="closeEditor" :isEdit="isEdit" :addnewData.sync="fpojo" ></add-new>

子组件调用：

this.$emit("fselect");

 

....之后用到再更新