記錄：使用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>

子組件調用：

this.$emit("fselect");

 

....以后用到再更新