“今天的内容比较大众，相信广大程序猿都有遇到过，那么咱们就不多BB了，直接往下看。”
首先聊聊为什么会出现跨域问题？跨域是什么？
域(Domain)是Windows网络中独立运行的单位，域之间相互访问则需要建立信任关系(即Trust Relation)。信任关系是连接在域与域之间的桥梁。当一个域与其他域建立了信任关系后，2个域之间不但可以按需要相互进行管理，还可以跨网分配文件和打印机等设备资源，使不同的域之间实现网络资源的共享与管理。有一种简明的说法来解释广域跨域：跨域访问，简单来说就是 A 网站的 javascript 代码试图访问 B 网站，包括提交内容和获取内容。由于安全原因，跨域访问是被各大浏览器所默认禁止的。
01
—
跨域问题
前端访问接口报跨域错误：
02
—
解决跨域问题的几种方法
1.java后端全局配置过滤器
@Configurationpublic 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); }}
@Configurationpublic class MyConfiguration extends WebMvcConfigurerAdapter {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**") .allowCredentials(true) .allowedHeaders("*") .allowedOrigins("*") .allowedMethods("*"); } }
controller方法加注解CrossOrigin,origin="*"代表所有域名都可访问
@RequestMapping("/tet")@CrossOrigin(origins = "*",maxAge = 3600)public String test( ){return "本方法支持跨域请求！！！";}
2.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 => { } }}
3.jQuery的ajax jsonp解决跨域问题
$.ajax({type : "get",async:false,url : "http://localhost:8080/test",dataType : "jsonp",//数据类型为jsonpjsonp: "jsonpCallback",//服务端返回回调方法名 success : function(data){ alert(JSON.stringify(data)); },error:function(){ alert('请求错误！');}});
