转载请注明出处:https://oldnoop.tech/c/173.html
跨域
通俗理解,在一个域名下的页面,发送一个ajax请求,将请求发送到另一个域名下
跨域 和主机 端口都有关系,主机/ip地址/域名不同,或者端口不同
比如:
http://localhost:8080/client.html中的js代码
//普通ajax请求失败
function ajax(){
$.ajax({
url:'http://localhost:8090/ajax',
type:'get',
dataType:'json',
success:function(res){
console.log(res);
},
error:function(e){
console.log(e);
}
});
}
浏览器控制台提示信息
跨域的2种主要方式
jsonp方式
客户端通过jsonp,发送ajax请求,
jsonp支持get请求,不支持post请求,如果服务端不允许get,会返回405错误码
和不跨域请求的情况相比,代码编写有变动(客户端和服务端代码都要变化)
常见的就是使用jquery的ajax,指定dataType为jsonp,
举例:
//jsonp方式请求
function ajax_jsonp(){
$.ajax({
//callback参数传递一个回调函数名,
//服务端直接返回 调用回调函数 的 代码字符串,
//jquery请求时会构造一个默认回调函数的参数callback
//参数值形如jQuery111303551896073699239_1521687330150(res)
url:'http://localhost:8090/jsonp',
type:'post',//这里的post指定是无用的,还是以get方式请求
dataType:'jsonp',//声明是jsonp请求
success:function(res){
console.log(res);
},
error:function(e){
console.log(e);
}
});
}
cors方式
服务端通过CORS方式,允许客户端跨域请求
cors支持所有的请求方式
和不跨域请求的情况相比,代码编写没有任何变动,
响应头 添加头信息 ACCESS-CONTROL-ALLOW-ORIGIN
cors配置允许跨域
全局配置,针对整个web服务
配置允许跨域请求的路径,允许的客户端域名
继承WebMvcConfigurerAdapter,重写addCorsMappings,配置跨域
@Configuration
public class CorsConfig extends WebMvcConfigurerAdapter {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry
.addMapping("/cors/**")
//.allowedOrigins("*") //允许所有的外部跨域请求
.allowedOrigins("http://localhost:8080")
.allowCredentials(false)
.maxAge(3600);
}
}
单独配置,针对单个服务接口
在控制器方法上使用注解@CrossOrigin配置跨域
//单独配置跨域
@RequestMapping("/cors2")
@ResponseBody
@CrossOrigin(
origins="http://localhost:8080"
,allowCredentials="false"
,maxAge=3600)
public Map<String, Object> cors2(){
Map<String, Object> map = new HashMap<>();
map.put("id", 1);
map.put("name", "张三");
return map;
}
允许的域名配置策略
一般企业内容的不同系统之间
ajax跨域,配置只允许企业内部系统的域名
如果是开放平台,
比如腾讯,百度的开放平台,ajax跨域,配置所有域名都可以访问
不使用框架,手动配置CORS
@RequestMapping("/ajax2")
public void ajax(HttpServletResponse resp) throws Exception{
resp.addHeader(HttpHeaders.ACCESS_CONTROL_ALLOW_ORIGIN, "*");
resp.addHeader(HttpHeaders.CONTENT_TYPE, "application/json");
Map<String, Object> map = new HashMap<>();
map.put("id", 1);
map.put("name", "张三");
ObjectMapper om = new ObjectMapper();
StringWriter sw = new StringWriter();
om.writeValue(sw, map);
String json = sw.toString();
System.out.println(json);
resp.getWriter().write(json);
}