基于SpringBoot+Vue的跨域处理

基于SpringBoot+Vue的跨域处理

VUE端Axios处理方式

import axios from 'axios'        //引入 axios库

//让Vue挂载axios
Vue.prototype.$ajax = axios
//配置axios访问根路径
axios.defaults.baseURL = 'http://localhost:8888'


//如何调用接口  get('/login?username='+username+'&password='+password)   delete(`/login?username=${username}&password=${password}`)
this.$ajax.post("/login",{json数据}).then((res)=>{
	//res为后端响应的数据一般有flag  data  message 三个参数
}).catch((err)=>{
    //错误信息  可以是后端响应的错误参数 如权限不足... 都不是就是后端没有启动，可以告诉用户是网络问题
}).finally(()=>{
    //无论是否请求成功都会执行的，如关闭对话框...
});

1、直接采用SpringBoot的注解@CrossOrigin

在Controller层加上@CrossOrigin即可

2、继承WebMvcConfigurerAdapter(已过时)或者实现WebMvcConfigurer接口

/**
 * AJAX请求跨域
 * @author 阿杰
 * @date   2021-3-20
 */
@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {
    
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry
        //过滤所有请求
        .addMapping("/**")
        //配置跨域来源
        .allowedOrigins("http://localhost:8080", "null")
        //是否允许携带参数
        .allowCredentials(true)
        //访问的方法
        .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
        //最大响应时间
        .maxAge(3600);
    }
}

3、配置原生过滤器

/**
 * AJAX请求跨域
 * @author 阿杰
 * @date   2021-3-20
 */
@Component
public class CORSFilter implements Filter {

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        HttpServletResponse res = (HttpServletResponse) response;
        res.addHeader("Access-Control-Allow-Credentials", "true");
        res.addHeader("Access-Control-Allow-Origin", "*");
        res.addHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT");
        res.addHeader("Access-Control-Allow-Headers", "Content-Type,X-CAF-Authorization-Token,sessionToken,X-TOKEN");
        if (((HttpServletRequest) request).getMethod().equals("OPTIONS")) {
            response.getWriter().println("ok");
            return;
        }
        chain.doFilter(request, response);
    }
    @Override
    public void destroy() {
    }
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }
}