12：CORS跨域设置-Java Spring

Yeats_Liao
121 阅读3分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

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）

在这里插入图片描述

  • 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
avatar
文章
阅读
粉丝