SpringBoot + vue axios 前后端工程解决跨域问题
使用场景: 常用于前后端联调过程中,出现接口访问跨域问题,至于跨域的原理,这里不做细说,自行百度,解决方法如下
1.添加配置类
package com.xy.quickapp.enterprise.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
/**
* Created by kang.zou
* on 2020/2/21
*/
@Configuration
public class SpringMvcConfig implements WebMvcConfigurer {
/**
* 设置前后端跨域
* @return
*/
@Bean
public WebMvcConfigurer webMvcConfigurer2(){
return new WebMvcConfigurer() {
/**
* 设置头 使可以跨域访问
* @param registry
* @since 4.2
*/
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("*")
.allowedHeaders("*")
.maxAge(3600)
.allowCredentials(true);
}
};
}
}
allowOrigins (允许哪些资源访问)可以从配置中读取,这样方便维护
allowCredentials(允许cookie、session跨域)
2.前端vue项目中axios中设置
2.1 main.js中设置
Vue.prototype.$axios = axios
axios.defaults.withCredentials =true;
2.2 axios单独设置
withcredentials:true