CORS 跨域 Cookie

前言：在之前的文章中我已经对如何使用 CORS 处理跨域请求进行了介绍，在本文中，我将介绍如何在 CORS 跨域的情况下设置和获取 Cookie，以及在处理跨域 Cookie 中可能遇到的问题：The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*'

CORS 跨域中的 Cookie

概述

​ 基于安全方面的考虑，在浏览器中无法获取跨域的 Cookie 这一点时永远不变的。但是我们处理跨域请求时有可能会遇到这样的情况：一个网页与域为bbb.cn的服务器正常发送请求和接收响应，同时这个网页也需要跨域访问aaa.cn服务器。

​ 众所周知，浏览器会在准备发送的请求中附上所有符合要求的Cookie，故在上面的情况中浏览器会自动处理网页与域为bbb.cn的服务器之间的 Cookie；但是在 CORS 跨域中，浏览器并不会自动发送 Cookie，也就是说，浏览器不会处理网页与aaa.cn服务器之间的 Cookie。

配置说明

要想浏览器处理 CORS 跨域中的 Cookie 只需要分别在网页以及服务端作出一点点改变：

1. 网页端中，对于跨域的 XMLHttpRequest 请求，需要设置withCredentials 属性为 true。

   var xhr = new XMLHttpRequest();
   xhr.open("GET", "http://aaa.cn/localserver/api/corsTest");
   xhr.withCredentials = true; // 设置跨域 Cookie
   xhr.send();
   
   

2. 同时服务端的响应中必须携带 Access-Control-Allow-Credentials: true 首部。如果服务端的响应中未携带Access-Control-Allow-Credentials: true 首部，浏览器将不会把响应的内容返回给发送者。

要想设置和获取跨域 Cookie，上面提到的两点缺一不可。另外有一点需要注意的是：规范中提到，如果 XMLHttpRequest 请求设置了withCredentials 属性，那么服务器不得设置 Access-Control-Allow-Origin的值为* ，否则浏览器将会抛出The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' 错误。

在基于 Filter 的 CORS 跨域中应用 Cookie

​ 基于 Filter 的 CORS 跨域实现实际上就是手动在响应中添加 CORS 要求的响应首部字段。一个简单 Filter 实现如下：

@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
    System.out.println("work");
    HttpServletResponse response = (HttpServletResponse) servletResponse;
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Credentials", "true");
    response.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
    filterChain.doFilter(servletRequest, servletResponse);
}

但是正如上面提到的：如果 XMLHttpRequest 请求设置了withCredentials 属性，那么服务器不得设置 Access-Control-Allow-Origin的值为* ，所以我们需要处理Access-Control-Allow-Origin 首部字段的值，否则将会得到以下的错误：

[图片上传失败...(image-476fc6-1538988796305)]

下面提供一种处理Access-Control-Allow-Origin 首部字段值的方法，我们可以根据请求的域来动态的设置：

@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
    HttpServletRequest request = (HttpServletRequest) servletRequest;
    HttpServletResponse response = (HttpServletResponse) servletResponse;
    String origin = request.getHeader("origin");// 获取源站
    response.setHeader("Access-Control-Allow-Origin", origin);
    response.setHeader("Access-Control-Allow-Methods", "POST, GET");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Credentials", "true");
    response.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
    filterChain.doFilter(servletRequest, servletResponse);
}

最后，在 Java Web 应用程序中获取和设置 Cookie 方法与普通的没有区别。

Cookie cookie = new Cookie("test", "value");
response.addCookie(cookie);

Cookie[] cookies = request.getCookies();

在基于@CorssOrigin 注解的 CORS 跨域中应用 Cookie

​ 在使用 Spring 提供的 CORS 支持的 @CorssOrigin 注解时，我们只需要在网页端设置跨域 XMLHttpRequest 请求的 withCredentials 属性就可以正常设置和获取跨域 Cookie。这是因为 Spring 的@CorssOrigin 注解默认情况下已经为我们设置响应中的 Access-Control-Allow-Credentials: true 首部，同时也会根据实际接收到的请求的源站设置 Access-Control-Allow-Origin首部。

​ 在 Spring MVC 中配置使用 CORS跨域的方法我已经在前面的文章中介绍过，详细的可以阅读文章Spring MVC 实现 CORS 跨域。 使用@CorssOrigin 注解后服务器设置 Cookie 的响应首部如下图所示：

[图片上传失败...(image-3d726f-1538988796305)]

​ 最后，跟上面一样，在 Java Web 应用程序中获取和设置 Cookie 方法与普通的没有区别。

Reference

• HTTP访问控制（CORS）

转载：链接