后端java(SpringBoot)，前端vue,jQuery跨域请求问题解决方案

跨域问题：

首先聊聊为什么会出现跨域问题？跨域是什么？

域(Domain)是Windows网络中独立运行的单位，域之间相互访问则需要建立信任关系(即Trust Relation)。信任关系是连接在域与域之间的桥梁。当一个域与其他域建立了信任关系后，2个域之间不但可以按需要相互进行管理，还可以跨网分配文件和打印机等设备资源，使不同的域之间实现网络资源的共享与管理。 有一种简明的说法来解释广域跨域：跨域访问，简单来说就是 A 网站的 javascript 代码试图访问 B 网站，包括提交内容和获取内容。由于安全原因，跨域访问是被各大浏览器所默认禁止的。

前端访问接口报跨域错误：

解决跨域问题几种方法

1.后端全局配置过滤器

@Configuration
public class GlobalCorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
          config.addAllowedOrigin("*");
          config.setAllowCredentials(true);
          config.addAllowedMethod("*");
          config.addAllowedHeader("*");
          config.addExposedHeader("*");

        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);

        return new CorsFilter(configSource);
    }
}

2.后端全局配置拦截器

@Configuration
public class MyConfiguration extends WebMvcConfigurerAdapter  {

	@Override  
    public void addCorsMappings(CorsRegistry registry) {  
        registry.addMapping("/**")  
                .allowCredentials(true)  
                .allowedHeaders("*")  
                .allowedOrigins("*")  
                .allowedMethods("*");  

    }  
}

3.SpringBoot方法加注解CrossOrigin,origin="*"代表所有域名都可访问

@RequestMapping("/tet")
@CrossOrigin(origins = "*",maxAge = 3600)
public String test( ){
	return "本方法支持跨域请求！！！";
}

4.vue-cli项目 webpack代理解决跨域问题
在vue.config.js文件中加入如下代码

// 生成代理配置对象,可配置多个代理地址
let proxyObj = {
    '/test': {
        target: "http://localhost:8080"
    },
    '/test2': {
        target: "http://localhost:8081"
    }
};

module.exports = {
    baseUrl: '/',
    outputDir: 'dist',
    lintOnSave: false,
    runtimeCompiler: true,
    devServer: {
        contentBase: "./",
        port: 8080,
        disableHostCheck: true,
        proxy: proxyObj,
        before: app => { }
    }
}

5.jQuery的ajax jsonp解决跨域问题

$.ajax({  
        type : "get",  
        async:false,  
        url : "http://localhost:8080/test",  
        dataType : "jsonp",//数据类型为jsonp  
        jsonp: "jsonpCallback",//服务端返回回调方法名
        success : function(data){  
            alert(JSON.stringify(data));
        },  
        error:function(){  
            alert('请求错误！');  
        }  
    });   

扫二维码关注博主微信公众号👇