12：CORS跨域设置-Java Spring

布满荆棘的人生 2024-04-03 09:25 6阅读 0赞

#### 目录 ####

*  12.1 CORS介绍
 *  12.2 CORS原理
 *  12.3 CORS实现

## 12.1 CORS介绍 ##

CORS跨域资源共享（Cross-origin resource sharing）是指在服务器端定义跨域请求规则，允许控制浏览器向跨域服务器发出请求，支持各种请求方式，解除了Ajax同源使用的限制

目前所有浏览器都支持CORS跨域设置，它突破了一个请求在浏览器发出只能在同源的情况下向服务器获取数据的限制，成为了主流的跨域解决方案

## 12.2 CORS原理 ##

CORS通过额外的HTTP头部信息，浏览器将Ajax请求分为普通请求和特殊请求

**普通请求**

请求方法

*  GET
 *  HEAD
 *  POST（Content-Type只限于`application/x-www-form-urlencoded`、`multipart/form-data`、`text/plain`）

HTTP的头信息

*  Accept
 *  Accept-Language
 *  Content-Language
 *  DPR
 *  Downlink
 *  Save-Data
 *  Viewport-Width
 *  Width
 *  Content-Type

**特殊请求**

请求方法

*  PUT
 *  DELETE
 *  TRACE
 *  PATCH
 *  POST（Content-Type值只限于`application/json`）

HTTP的头信息

*  自定义

## 12.3 CORS实现 ##

SpringBoot设置CORS的的本质是通过设置浏览器响应头信息，浏览器使用OPTIONS方法发送预检请求，获知服务器是否允许该跨域请求，如果不允许发送带数据的真实请求，则会受到限制

**普通请求**

普通请求头中携带Origin字段，用于说明当前请求的协议、域名和端口，服务器根据这个值决定是否同意这次请求

*  `Access-Control-Allow-Origin` 服务端请求域设置
 *  `Access-Control-Allow-Credentials` Cookie请求设置
 *  `Access-Control-Request-Headers` 额外发送的请求头字段信息

XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段，想拿到额外的字段必须在Headers头字段里指定

*  Cache-Control
 *  Content-Language
 *  Content-Type
 *  Expires
 *  Last-Modified
 *  Pragma

1.浏览器正常请求

浏览器直接发出CORS请求，在头信息之中增加Origin、Access字段

GET /cors HTTP/1.1
    Origin: http://www.xxx.com
    Host: xxx.xxxx.com
    Accept-Language: en-US  
    Connection: keep-alive  
    User-Agent: Mozilla/5.0...

2.服务端对请求的肯定回应

服务器收到请求以后，检查Origin、Access字段是否许可范围内，如果不在，服务器返回一个HTTP响应，如果在，服务器返回肯定响应

Access-Control-Allow-Origin: http://www.xxx.com
    Access-Control-Allow-Methods: GET
    Content-Type: text/html; charset=utf-8

**特殊请求**

特殊会在正式通信之前，增加一次HTTP预检请求（Preflight）

> ![在这里插入图片描述][1a88f5034b8c4571a87515e1bb1a05f6.png]

*  `Access-Control-Allow-Origin` 服务端请求域设置
 *  `Access-Control-Allow-Credentials` Cookie请求设置
 *  `Access-Control-Request-Headers` 额外发送的请求头字段信息
 *  `Access-Control-Max-Age` 用来指定本次预检请求的有效期，单位为秒

1.浏览器预检请求

预检请求是指浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的HTTPRequest请求，否则就报错

OPTIONS /cors HTTP/1.1
    Origin: http://www.xxx.com
    Access-Control-Request-Method: PUT
    Access-Control-Request-Headers: Header
    Host: xxx.xxxx.com			
    Accept-Language: en-US
    Connection: keep-alive
    User-Agent: Mozilla/5.0...

2.服务端对预检请求的肯定响应

服务器收到预检请求以后，检查了Origin、Access头字段以后，确认允许跨域请求，做出响应

HTTP/1.1 200 OK
    Date: 
    Server: 
    Access-Control-Allow-Origin: http://www.xxx.com
    Access-Control-Allow-Methods: GET, POST, PUT  
    Access-Control-Allow-Headers: Header
    Content-Type: text/html; charset=utf-8
    Content-Encoding: gzip
    Content-Length: 0
    Keep-Alive: timeout=2, max=100
    Connection: Keep-Alive
    Content-Type: text/plain

3.浏览器正常请求

服务器通过了预检请求，以后每次浏览器正常的CORS请求和服务器的响应，都会有一个Origin、Access头信息字段

PUT /cors HTTP/1.1
    Origin: http://www.xxx.com
    Host: xxx.xxxx.com
    Header: value  
    Accept-Language: en-US  
    Connection: keep-alive  
    User-Agent: Mozilla/5.0...

4.服务器响应数据

Access-Control-Allow-Origin: http://www.xxx.com
    Content-Type: text/html; charset=utf-8

[1a88f5034b8c4571a87515e1bb1a05f6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/bfaee0ff129d4288a24a44e275206bb9.png