Record: Use springboot of cors and vue of cross-domain axios

First, write a configuration class, and registration CorsFilter:

Note wrong not to allow cross-domain name

@Configuration
public class ZysuyuanCorsConfiguration {

    @Bean
    public CorsFilter corsFilter() {
        // initialize cors configuration object 
        CorsConfiguration corsConfiguration = new new CorsConfiguration ();
         // allow cross-domain name, if you want to carry cookie, can not write *, * on behalf of all domain names are domain access 
//         corsConfiguration.addAllowedOrigin ( "HTTP: / / localhost: 10008 "); 
        // this test machine nginx 
        corsConfiguration.addAllowedOrigin (" HTTP: // localhost: 8778 " );
 //         corsConfiguration.addAllowedOrigin (" HTTP: // localhost: 8778 "); 
        corsConfiguration.setAllowCredentials ( to true );     // allowed Cookies 
        corsConfiguration.addAllowedMethod ( "*");     // representing all the request method: get, post, put, delete
        corsConfiguration.addAllowedHeader ( "*");     // allowed any header information

        // initialization configuration cors source object 
        UrlBasedCorsConfigurationSource configurationSource = new new UrlBasedCorsConfigurationSource ();
        configurationSource.registerCorsConfiguration("/**",corsConfiguration);

        // return corsFilter instance, parameters: the source object CORS configuration 
        return  new new CorsFilter (configurationSource);
    }
}

 

 

 Two, axios written request vue

Note: If vue2.0 used for axios (PUT, when the post request), 415 encounters an error (Reference: https://www.cnblogs.com/shuaifing/p/7921102.html )

Solution: axios third argument config, set the request header information'Content-Type': 'application/json;charset=UTF-8'

    insertDevice(query) {
        return request({
            url: '/item/device/save',
            method: 'post',
            data: JSON.stringify(query),
            headers : {  
                'The Type-the Content': 'file application / JSON; charset = UTF-. 8'   // Note that the header information to be written here             }application/json;charset=UTF-8

        })
    }

supplement:

vue neutron component invokes parent element method (reference: https://juejin.im/post/5c1370365188250f73759a79 )

1, $ emit method

father:

@fselect binding searchBydeviceName methods parent components

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

Subcomponents call:

this.$emit("fselect");

 

.... used again after the update