优秀毕业设计网站设计单页网站制作教程
1. 什么是跨域
从不同的地址访问另外一个地址就是跨域
2.跨域一定会有异常吗
跨域异常只会在前端发生，后端跨域不会产生异常
因为浏览器有一个叫做同源策略的东西，它发现不同域之间的访问是不安全的行为，会禁止，所以会抛出异常
3.五种解决跨域的方式
1. 跨域请求JSONP
前端配置
$.agax({url：’http://localhost:8080/cors/jsonp/1’，dataType:"jsonp",//jsonp:'a',不指定默认callback//jsonpCallback:"cc",不指定自动生产type:'GET',success:function(){alert(result.data);}});
后端配置：
@GetMapp("cors/jsonp/{id}")
public JSONObject getUser(@PathVariable Integer id,String callback){User user=new User("xushu","jsonp");return new JSONPObject(callback,new Resule<>(200,"SUCCESS",user))
}
好处：兼容各种浏览器
弊端：前端端都需要配置-耦合度高
2. 跨域请求cors【单一】
注意：需要用到@CrossOrigin注解
前端配置
$.agax({url：’http://localhost:8080/cors/1’，type:'GET',success:function(){alert(result.data);}});
后端配置：
@GetMapp("cors/{id}")
@CrossOrigin("http://localhost:8081")
public JSONObject getUser(@PathVariable Integer id){User user=new User("xushu","jsonp");return new Resule<>(200,"SUCCESS",user)；
}
注解：只支持单一的接口
3. 跨域请求cors【批量】
注意：后端需要实现WebMvcConfigurer
后端配置：
public class MyWebMvcConfigurer implements WebMvcConfigurer{@Overridepublic void addCorsMappings(CorsRegistry registry){registry.addMapping("user/*")//配置那些接口可以跨域.allowedOrigins("http://localhost:8080")//配置那些来源有权跨域.allowedMethods("GET","POST","DELETE","PUT");//配置运行跨域访问方法};
}
4. 跨域请求cors【所有】
注意：后端需要配置过滤器
后端配置：
@Configuration
public class MyCorsFilter{//@Beanpublic CorsFilter corsFilter(){//1.创建CORS配置对象CorsConfiguration config=new CorsConfiguration();//支持域名config.addAllowedOriginPattern("*");//是否发送cookieconfig.setAllowCredentials(true);//支持请求方式config.addAllowedMethod("*");//添加地址映射UrlBasedCorsConfigurationSource corsConfigurationSource=new UrlBasedCorsConfigurationSource ();corsConfigurationSource.registerCorsConfiguration("/**",config);//返回corsFilter对象return new CorsFilter(corsConfigurationSource);}
}
优缺点：
优点：前端不需要写代码就可以支持，主要靠服务器进行配置**
缺点：IE浏览器不能低于IE10,浏览器一旦发现AJAX请求跨域，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉【option请求】
5.nginx 反向代理
