SpringBoot+Vue使用axios解决跨域问题

最近在学习VUE，学到发送请求这个阶段了   推荐上B站  上面好多大神的教学视频

由于 vue更新到2.0之后vue-resource不再更新，强烈推荐使用axios发送请求，因此入手了axios

使用非常简单，直接查看官方文档就行：https://github.com/axios/axios

这个是中文文档：https://www.kancloud.cn/yunye/axios/234845

html页面设置

使用中，进行到CORS(跨域资源共享)，网上已有的接口人家都设置好了后端如何允许跨域访问，为了深刻理解一下，自己搭建一个java服务端，我用的是SpringBoot搭建的服务端，关键代码如下：

创建一个CorsConfig （跨域配置类）

package com.imjie.demo;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;


@Configuration
public class CorsConfig {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1允许任何域名使用
        corsConfiguration.addAllowedHeader("*"); // 2允许任何头
        corsConfiguration.addAllowedMethod("*"); // 3允许任何方法（post、get等）
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig()); // 4
        return new CorsFilter(source);
    }
}

这个CorsConfig.java一定要放在根目录下，我的目录结构是这样的

跟demoApplication.java同级

数据库中放了两条数据进行测试：

 

完成！