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;

②后端

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

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