转载请注明出处：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);
        }
    });
}

浏览器控制台提示信息

已拦截跨源请求：同源策略禁止读取位于 http://localhost:8090/ajax 的远程资源。

（原因：CORS 头缺少 'Access-Control-Allow-Origin'）。

跨域的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);
}