Vue+Axios+SpringBoot前后端分离项目解决跨域问题

什么是跨域？

不同服务器，不同项目，不同端口，满足以上三点任意一点的都是跨域请求

如何解决？

①前端

在Vue-Cli的核心配置文件main.js中，创建axios实例时允许使用凭证（Session）

/**
 * 导入axios
 */
import axios from 'axios';

/**
 * 创建axios实例
 */
 let axiosInstance = axios.create({
  baseURL: 'http://localhost/VueServe/',  //设置服务端基础路径
  timeout: 1000,  //设置超时时间
   // `withCredentials` 表示跨域请求时是否需要使用凭证
  withCredentials: true, // default =false  允许使用凭证
  headers: {'X-Requested-With': 'XMLHttpRequest'}  //设置请求头为Ajax请求
  
});
//设置axios实例对象为一个原型属性 ,注册为VUE的原型属性后就可以在VUE视图中使用‘this.属性名’来调用  $axios 为属性名

Vue.prototype.$axios=axiosInstance;

②后端

可以单独写配置类，也可以在主启动类中进行编写

@SpringBootApplication
public class VueServeApplication {

    public static void main(String[] args) {
        SpringApplication.run(VueServeApplication.class, args);
    }

    @Bean
    public WebMvcConfigurer webMvcConfigurer(){
        return new WebMvcConfigurer() {
            /**
             * 重写跨域映射，在其中进行跨域配置
             * @param registry  跨域注册器
             */
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/testController/*")//指定当前项目中哪些资源可以跨域访问  /** 表示根目录下的所有目录 允许所有资源被访问
                        .allowedMethods("*")//允许哪些请求方式可以跨越访问（GET/POST/DELETE/PUT） * 表示所有请求
                        .allowCredentials(true)//是否允许使用凭证   session
                        .allowedOrigins("http://localhost:8080");//允许哪些项目（资源）跨域访问本应用  此处指定的另一个项目的路径
                WebMvcConfigurer.super.addCorsMappings(registry);
            }
        };
    }
    
}