CORS跨域

为什么会有跨域的问题？

为了保证用户信息的安全，所有的浏览器都遵循同源策略，那什么情况下算同源呢？同源策略又是什么呢？记住：协议、域名、端口号完全相同时，才是同源

可以参考 Web安全 - 浏览器的同源策略

在同源策略下，会有以下限制：

无法获取非同源的 Cookie、LocalStorage、SessionStorage 等
无法获取非同源的 dom
无法向非同源的服务器发送 ajax 请求
但是我们又经常会遇到前后端分离，不在同一个域名下，需要ajax请求数据的情况。那我们就要规避这种限制。可以在网上搜到很多解决跨域的方法，有些方法比较古老了，现在项目中用的比较多的是 jsonp 和 CORS（跨域资源共享），这篇主要讲 CORS 的原理和具体实践。

CORS 跨域原理

CORS 跨域的原理实际上是浏览器与服务器通过一些 HTTP 协议头来做一些约定和限制。可以查看 HTTP-访问控制（CORS）

与跨域相关的协议头

请求头	说明
Origin	表明预检请求或实际请求的源站URL，不管是否跨域ORIGIN字段总是被发送
Access-Control-Request-Method	将实际请求所使用的HTTP方法告诉服务器
Access-Control-Request-Headers	将实际请求所携带的首部字段告诉服务器
响应头	说明
Access-Control-Allow-Origin	指定允许访问该资源的外域URI，对于携带身份凭证的请求不可使用通配符
Access-Control-Expose-Headers	指定XMLHttpRequest的getResponseHeader可以访问的响应头
Access-Control-Max-Age	指定preflight请求的结果能够被缓存多久
Access-Control-Allow-Credentials	是否允许浏览器读取response的内容；当
Access-Control-Allow-Methods	指定实际请求所允许使用的HTTP方法
Access-Control-Allow-Headers	指定实际请求中允许携带的首部字段

代码实例

这里写了个 demo，一步步来分析。目录如下：

.
├── README.md
├── client
│   ├── index.html
│   └── request.js
└── server
    ├── pom.xml
    ├── server-web
    │   ├── pom.xml
    │   ├── server-web.iml
    │   └── src
    │       └── main
    │           ├── java
    │           │   └── com
    │           │       └── example
    │           │           └── cors
    │           │               ├── constant
    │           │               │   └── Constants.java
    │           │               ├── controller
    │           │               │   └── CorsController.java
    │           │               └── filter
    │           │                   └── CrossDomainFilter.java
    │           ├── resources
    │           │   └── config
    │           │       └── applicationContext-core.xml
    │           └── webapp
    │               ├── WEB-INF
    │               │   ├── dispatcher-servlet.xml
    │               │   └── web.xml
    │               └── index.jsp
    └── server.iml

Client：前端，简单的ajax请求

在client文件夹下，启动静态服务器，前端页面通过http://localhost:8000/index.html访问：

1	anywhere -h localhost -p 8000

Server： java项目，SpringMVC

在 IntelliJ IDEA 中本地启动 tomcat，设置host: http://localhost:8080/，服务端数据通过http://localhost:8080/server/cors请求。

这里前端和后端因为端口号不同，存在跨域限制，下面通过 CORS 来解决因为跨域无法通过ajax请求数据的问题。

没有允许跨域的情况

这种情况就是前端什么都不做，服务端也什么都不做。

Client: 请求成功后，将数据显示在页面上

new Request().send('http://localhost:8080/server/cors',{
    success: function(data){
        document.write(data)
    }
});

Server:

@Controller
@RequestMapping("/server")
public class CorsController {
    @RequestMapping(value="/cors", method= RequestMethod.GET)
    @ResponseBody
    public String ajaxCors(HttpServletRequest request) throws Exception{
        return "SUCCESS";
    }
}

在浏览器地址栏输入http://localhost:8080/server/cors直接请求服务端，可以看到返回结果： ‘SUCCESS’

在浏览器地址栏输入http://localhost:8000/index.html，从不同域的网页中向 Server 发送 ajax 请求。可以看到几个方面：

从 network 可以看到，请求返回正常。

但 Response 中没有内容，显示 Failed to load response data。

并且控制台报错：

总结：

浏览器请求是发出去了的，服务端也会正确返回，但是我们拿不到response的内容
浏览器控制台会报错提示可以怎么做，而且提示的很明白： xhr不能请求http://localhost:8080/server/cors，请求资源的响应头中没有设置Access-Control-Allow-Origin，Origin：http://localhost:8000是不允许跨域请求的。

那下一步，我们要在服务端响应跨域请求时，设置响应头: Access-Control-Allow-Origin

设置 Access-Control-Allow-Origin 允许跨域

先说明为什么要设置 Access-Control-Allow-Origin，可以把 Access-Control-Allow-Origin 当作一个指令，服务端设置 Access-Control-Allow-Origin 就是告诉浏览器允许向服务端请求资源的域名，浏览器通过 Response 中的 Access-Control-Allow-Origin 就可以知道能不能把数据吐出来。

官方解释是这样的： Access-Control-Allow-Origin 响应头指定了该响应的资源是否被允许与给定的 origin 共享。

Access-Control-Allow-Origin可以设置的值有：

1 2	Access-Control-Allow-Origin: * Access-Control-Allow-Origin:

那在java服务端给响应头设置 Access-Control-Allow-Origin 可以这么做：

1、添加一个过滤器

public class CrossDomainFilter implements Filter{
    public void init(FilterConfig filterConfig) throws ServletException {}
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse resp = (HttpServletResponse)servletResponse;
        resp.setHeader("Access-Control-Allow-Origin", "http://localhost:8000");
        filterChain.doFilter(servletRequest,servletResponse);
    }
    public void destroy() {}
}

2、然后在web.xml文件中添加过滤器配置：

<filter>
     <filter-name>crossDomainFilter</filter-name>
     <filter-class>com.example.cors.filter.CrossDomainFilter</filter-class>
</filter>
<filter-mapping>
      <filter-name>crossDomainFilter</filter-name>
      <url-pattern>/*</url-pattern>
</filter-mapping>

3、然后重新启动tomcat，client重新发送请求http://localhost:8000/index.html

可以看到我们能够拿到返回结果了，响应头中有我们在服务端设置的Access-Control-Allow-Origin: http://localhost:8000，这个应该跟请求头中的origin一致，或者设置Access-Control-Allow-Origin:*也是可以的，这就允许任何网站来访问资源了（前提是不带凭证信息，这个后面讲）

以上就是允许一个简单的跨域请求的做法，只需要服务端设置响应头Access-Control-Allow-Origin。

简单请求与预检请求

上面讲述了一个简单请求通过在服务端设置响应头 Access-Control-Allow-Origin 就可以完成跨域请求。

那怎样的请求算是一个简单请求？与简单请求相对应的是什么样的请求呢？解决跨域的方式又有什么不一样呢？

符合以下条件的可视为简单请求：

1、使用下列 HTTP 方法之一

- GET
- HEAD
- POST，并且Content-Type的值在下列之一：
  - text/plain
  - multipart/form-data
  - application/x-www-form-urlencoded

2、并且请求头中只有下面这些

- Accept
- Accept-Language
- Content-Language
- Content-Type （需要注意额外的限制）
- DPR
- Downlink
- Save-Data
- Viewport-Width
- Width

不满足上述要求的在发送正式请求前都要先发送一个预检请求，预检请求以 OPTIONS 方法发送，浏览器通过请求方法和请求头能够判断是否发送预检请求。

比如 Client 发送如下请求：

new Request().send('http://localhost:8080/server/options',{
    method: 'POST',
    header: {
        'Content-Type': 'application/json'  //告诉服务器实际发送的数据类型
    },
    success: function(data){
        document.write(data)
    }
});

Server 端处理请求的 controller:

@Controller
@RequestMapping("/server")
public class CorsController {
    @RequestMapping(value="/options", method= RequestMethod.POST)
    @ResponseBody
    public String options(HttpServletRequest request) throws Exception{
        return "SUCCESS";
    }
}

因为请求时，请求头中塞入了 header，’Content-Type’: ‘application/json’。根据前面讲述的可以知道，浏览器会以 OPTIONS 方法发出一个预检请求，浏览器会在请求头中加入：

1 2	Access-Control-Request-Headers:content-type Access-Control-Request-Method:POST

这个预检请求的作用在这里就是告诉服务器：我会在后面请求的请求头中以 POST 方法发送数据类型是application/json 的请求，询问服务器是否允许。

在这里服务器还没有做任何允许这种请求的设置，所以浏览器控制台报错：

也清楚的说明了出错的原因： 服务端在预检请求的响应中没有告诉浏览器允许协议头 Content-Type，即服务端需要设置响应头 Access-Control-Allow-Headers，允许浏览器发送带 Content-Type 的请求。

Server端过滤器中添加Access-Control-Allow-Headers：

public class CrossDomainFilter implements Filter{
    public void init(FilterConfig filterConfig) throws ServletException {}
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse resp = (HttpServletResponse)servletResponse;
        resp.setHeader("Access-Control-Allow-Origin", "http://localhost:8000");
        resp.setHeader("Access-Control-Allow-Headers", "Content-Type");
        filterChain.doFilter(servletRequest,servletResponse);
    }
    public void destroy() {}
}

可以看到请求成功

再来看请求的具体信息，第一次以 OPTIONS 方法发送预检请求，浏览器设置请求头：

1 2	Access-Control-Request-Headers:content-type //请求中加入的请求头 Access-Control-Request-Method:POST //跨域请求的方法

服务端设置响应头：

1 2	Access-Control-Allow-Headers:Content-Type //允许的header Access-Control-Allow-Origin:http://localhost:8000 //允许跨域的源

也可以设置 Access-Control-Allow-Methods 来限制客户端的的请求方法。

这样预检请求成功了，浏览器会发出第二个请求，这是真正请求数据的请求：

可以看到 POST 请求成功了，第二次请求头中没有设置 Access-Control-Request-Headers 和 Access-Control-Request-Method。

但是这里有个问题，需要预检请求时，浏览器会发出两次请求，一次 OPTIONS，一次 POST。两次都返回了数据。这样服务端如果逻辑复杂一些，比如去数据库查找数据，从 web 层、 service 到数据库这段逻辑就会走两遍，浏览器会两次拿到相同的数据，所以服务端的 filter 可以改一下，如果是 OPTIONS 请求，在设置完跨域请求响应头后就不走后面的逻辑直接返回。

public class CrossDomainFilter implements Filter{
    public void init(FilterConfig filterConfig) throws ServletException {}
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse resp = (HttpServletResponse)servletResponse;
        resp.setHeader("Access-Control-Allow-Origin", "http://localhost:8000");
        resp.setHeader("Access-Control-Allow-Headers", "Content-Type");   
        //OPTION请求就直接返回
        HttpServletRequest req = (HttpServletRequest) servletRequest;
        if (req.getMethod().equals("OPTIONS")) {
            resp.setStatus(200);
            resp.flushBuffer();
        }else {
            filterChain.doFilter(servletRequest,servletResponse);
        }
    }
    public void destroy() {}
}

总结： **

对于POST请求设置响应头Content-Type为某些值、自定义请求头等情况，浏览器会先以OPTIONS方法发送一个预检请求，并设置相应的请求头。
服务端还是正常返回，但如果预检请求响应头中不设置相应的响应头，预检请求不通过，不会再发出第二次请求来获取数据。
服务端设置相应的响应头，浏览器会发出第二个请求，并将服务端返回的数据吐出，我们可以获得response的内容

带凭证信息的请求

还有一种情况我们经常遇到。浏览器在发送请求时需要给服务端发送 cookie，服务端根据 cookie 中的信息做一些身份验证等。

默认情况下，浏览器向不同域的发送 ajax 请求，不会携带发送 cookie 信息。

Client:

var containerElem = document.getElementById('container')
new Request().send('http://localhost:8080/server/testCookie',{
    success: function(data){
        containerElem.innerHTML = data
    }
});

Server:

@RequestMapping(value="/testCookie", method= RequestMethod.GET)
@ResponseBody
public String testCookie(HttpServletRequest request,HttpServletResponse response) throws Exception{
    String str = "SUCCESS";
    Cookie[] cookies = request.getCookies();
    String school = getSchool(cookies);
    if(school == null || school.length() == 0){
        addCookie(response);
    }
    return str + buildText(cookies);
}

服务端收到请求，判断 cookie 中有没有 school，没有就添加 cookie.

可以看到响应头中有 Set-Cookie，再次请求时，如果是同源请求，浏览器会将 Set-Cookie 中的值放在请求头中，但是对于跨域请求，默认是不发送这个 Cookie 的。

如果要让浏览器发送 cookie，需要在 Client 设置 XMLHttpRequest 的 withCredentials 属性为 true。

Client:

var containerElem = document.getElementById('container')
new Request().send('http://localhost:8080/server/testCookie',{
    withCredentials: true,
    success: function(data){
        containerElem.innerHTML = data
    }
});

现在浏览器在请求头中加入了 cookie 信息

但是服务端返回的数据没有在页面中展示，并且报错：

报错信息很明白： 当请求中包含凭证信息时，需要设置响应头 Access-Control-Allow-Credentials，是否带凭证信息是由 XMLHttpRequest的withCredentials 属性控制的。 ** 所以我们在 Server 端 filter 中加入这个响应头：

public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse resp = (HttpServletResponse)servletResponse;
        resp.setHeader("Access-Control-Allow-Origin", "http://localhost:8000");
        resp.setHeader("Access-Control-Allow-Credentials","true");
        HttpServletRequest req = (HttpServletRequest) servletRequest;
        if (req.getMethod().equals("OPTIONS")) {
            resp.setStatus(200);
            resp.flushBuffer();
        }else {
            filterChain.doFilter(servletRequest,servletResponse);
        }
    }

现在浏览器知道响应头中 Access-Control-Allow-Credentials 为 true，就会把数据给吐出来了，我们能够从response 中拿到内容了。

那如果附带凭证信息并且有预检请求呢？如果有预检请求，并附带凭证信息（ XMLHttpRequest 的withCredentials 设置为 true），服务端需要设置 Access-Control-Allow-Credentials: true，否则浏览器不会发出第二次请求，并报错。

总结：

跨域请求时，浏览器默认不会发送cookie，需要设置XMLHttpRequest的withCredentials属性为true
浏览器设置XMLHttpRequest的withCredentials属性为true，表明要向服务端发送凭证信息(这里是cookie)。那么服务端就需要在响应头中添加Access-Control-Allow-Credentials为true。否则浏览器上有两种情况：
如果是简单请求，服务端结果吐出了，浏览器拿到了但就是不给吐出来，并报错。
如果是预检请求，同样我们拿不到返回结果，并报错提示预检请求不通过，不会再发第二次请求。

其他

另外就是设置了 XMLHttpRequest 的 withCredentials 属性为 true，浏览器发出去了，服务端还是拿不到 cookie的问题。

cookie 也遵循同源策略的，在设置 cookie 的时候可以发现除了键值对，还可以设置 cookie 的这些值：

如果获取不到 cookie，可以检查下 cookie 的 domain 和 path.

IE 上跨域访问没有权限

在跨域发送 ajax 请求时提示没有权限。因为IE浏览器默认对跨域访问有限制。需要在浏览器设置中去除限制。 方法： 设置 > Internet 选项 > 安全 > 自定义级别 > 在设置中找到其他 - 在【其他】中将【通过域访问数据源】启用。

Demo 源码

CORS Demo 源码