SpringBoot入门教程(十三)CORS方式实现跨域

什么是跨域？浏览器从一个域名的网页去请求另外一个域名的资源时，域名、端口、协议任一不一样，都是跨域 。 跨域资源访问是常常会遇到的场景，当一个资源从与该资源自己所在的服务器不一样的域或端口请求一个资源时，资源便会发起一个跨域 HTTP 请求。出于安全考虑，浏览器会限制从脚本内发起的跨域HTTP请求。

vCORS方式实现跨域

跨域的方式有不少种， 今天主要介绍CORS（网络通讯技术），全称Cross-Origin Resource Sharing  ，是一种容许当前域（domain）的资源（好比html/js/web service）被其余域（domain）的脚本请求访问的机制，一般因为同域安全策略（the same-origin security policy）浏览器会禁止这种跨域请求。

v服务端配置

因为CORS方式实现跨域须要服务端配合设置Header，在springboot中只须要添加如下配置便可，或者在须要支持跨域的方法中直接对response设置header，如下三种方式效果相同。

第一种：

@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {
    /**
     * 重写addCorsMappings方法实现跨域的设置
     * 固然跨域还能够经过在Controller或方法上添加‘@CrossOrigin("http://domain2.com")’的注解实现，不过下面这种方便统一管理
     * 参考：https://docs.spring.io/spring/docs/current/spring-framework-reference/html/cors.html
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
            .allowedOrigins("http://a.test.com")  //容许的origin
            .allowedMethods("GET", "POST", "DELETE") //容许的方法
            .allowCredentials(true) //是否容许携带cookie
            .maxAge(3600);
    }

    //全局跨域，Enabling CORS for the whole application is as simple as:
    /*@Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**");
    }*/   
}

第二种：

@RequestMapping
public Object index(HttpServletRequest request, HttpServletResponse response, @CookieValue(value = "sid", required = false) String sid) {
    response.setHeader("Access-Control-Allow-Origin","http://a.test.com"); //容许跨域的Origin设置
    response.setHeader("Access-Control-Allow-Credentials","true"); //容许携带cookie
    logger.info("cookie sid = " + sid);
    return restTemplateService.someRestCall();
}

第三种：

@RequestMapping
@CrossOrigin(origins = "http://a.test.com", allowCredentials = "true")
public Object index(HttpServletRequest request, @CookieValue(value = "sid", required = false) String sid) {
    logger.info("cookie sid = " + sid);
    return restTemplateService.someRestCall();
}

v前端调用方式

1. 原生ajax调用示例：

var xhr = new XMLHttpRequest();  
xhr.open("POST", "http://b.test.com/api/rest", true);  
xhr.withCredentials = true; //支持跨域发送cookies
xhr.send();

2. jQuery调用示例：

$.ajax({
    url: 'http://b.test.com/api/rest',
    dataType: 'json',
    type : 'POST',
    xhrFields: {
        withCredentials: true //是否携带cookie
    },
    crossDomain: true,
    contentType: "application/json",
    success: (res) => {
      console.log(res);
    }
  });

3. fetch方式

fetch('http://b.test.com/api/rest', 
  {credentials: 'include'}  //注意这里的设置，支持跨域发送cookies
).then(function(res) {
  if (res.ok) {
    res.json().then(function(data) {
      console.log(data.value);
    });
  } else {
    console.log("Looks like the response wasn't perfect, got status", res.status);
  }
}, function(e) {
  console.log("Fetch failed!", e);
});

v注意事项

值得注意的一点是：服务器端 Access-Control-Allow-Credentials = true时，参数Access-Control-Allow-Origin 的值不能为 '*'，必须为具体的origin。

另外还须要注意：试了一下，cookie的域必须是两个子域的顶级域，才能实现跨域传输。即若是网站A是：a.test.cn,网站B是：b.test.com，那么不管如何都不能实现A携带会话cookie发送跨域请求到网站B上。

其余参考资料：

• SpringBoot配置Cors解决跨域请求问题 http://www.javashuo.com/article/p-brqbxche-gv.html
• enable cross-origin resource sharing https://enable-cors.org/
• Understanding CORS https://spring.io/understanding/CORS

v源码地址

https://github.com/toutouge/javademosecond/tree/master/hellospringboot

做　　者：请叫我头头哥
出　　处：http://www.cnblogs.com/toutou/
关于做者：专一于基础平台的项目开发。若有问题或建议，请多多赐教！
版权声明：本文版权归做者和博客园共有，欢迎转载，但未经做者赞成必须保留此段声明，且在文章页面明显位置给出原文连接。
特此声明：全部评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误，共同进步。或者直接私信我
声援博主：若是您以为文章对您有帮助，能够点击文章右下角【推荐】一下。您的鼓励是做者坚持原创和持续写做的最大动力！