CORS 过程

CORS (Cross-Origin Resource Sharing)是由 W3C 制定的一种跨域资源共享技术标准,其目的就是为了解决前端的跨域请求。在 Java EE 开发中,最常见的前端跨域请求解决方案是 JSONP,但是 JSONP 只支持 GET 请求,这是一个很大的缺陷,而 CORS 则支持多种 HTTP 请求方法。以 CORS 中的 GET 请求为例,当浏览器发起请求时,请求头中携带了如下信息:

...
Host: localhost:8080 
Origin: http://localhost:8081 
Referer: http://localhost:8081/index.html
...

假如服务端支持 CORS,则服务端给出的响应信息如下:

...
Access-Control-Allow-Origin: http://localhost:8081 
Content-Length: 20 
Content-Type : text/plain;charset=UTF-8 
Date: Thu, 12 Jul 2018 12:51:14 GMT
...

响应头中有一个 Access-Control-Allow-Origin 字段,用来记录可以访问该资源的域。当浏览 器收到这样的响应头信息之后,提取出 Access-Control-Allow-Origin 字段中的值,发现该值包含当前页面所在的域,就知道这个跨域是被允许的,因此就不再对前端的跨域请求进行限制。这就是 GET 请求的整个跨域流程,在这个过程中,前端请求的代码不需要修改,主要是后端进行处理。这个流程主要是针对 GETPOST 以及 HEAD 请求,并且没有自定义请求头,如果用户发起一个 DELETE 请求、 PUT 请求或者自定义请求头,流程就会稍微复杂一些。

以 DELETE 请求为例,当前端发起一个 DELETE 请求时,这个请求的处理会经过两个步骤。

  1. 发送一个 OPTIONS 请求。代码如下:
...
Access-Control-Request-Method DELETE 
Connection keep-alive 
Host localhost:BOBO 
Origin http://localhost: 8081
...

这个请求将向服务端询问是否具备该资源的 DELETE 权限,服务端会给浏览器一个响应,代码如下:

...
HTTP/1.1 200
Access-Control-Allow-Origin: http://localhost:8081 
Access-Control-Allow-Methods: DELETE
Access-Control-Max-Age: 1800 
Allow: GET, HEAD, POST, PUT, DELETE, OPTIONS, PATCH 
Content-Length: 0 
Date: Thu, 12 Jul 2018 13:20:26 GMT
...

服务端给浏览器的响应, Allow 头信息表示服务端支持的请求方法,这个请求相当于一个探测请求,当浏览器分析了请求头宇段之后,知道服务端支持本次请求, 则进入第二步。

  1. 发送 DELETE 请求。接下来浏览器就会发送一个跨域的 DELETE 请求,代码如下:
...
Host: localhost:8080 
Origin: http://localhost:8081 
Connection: keep-alive 
...

服务端给一个响应:

...
HTTP/1.1 200
Access-Control-Allow-Origin: http://localhost:8081
Content-Type: text/plain;charset=UTF-8
Date: Thu, 12 Jul 2018 13:20:26 GMT
...

至此, 一个跨域的 DELETE 请求完成。 无论是简单请求还是需要先进行探测的请求,前端的写法都是不变的,额外的处理都是在服务端来完成的。

发布了17 篇原创文章 · 获赞 19 · 访问量 371

猜你喜欢

转载自blog.csdn.net/siriusol/article/details/104161142