CORS规范 – HanSan'Blog

先总结几点

CORS（跨域资源共享）是一种Web开发的规范，它不是问题，是规范！！不需要解决！！只能遵循！！
跨域只存在于浏览器端，这说明CORS规范是浏览器作为代理一直在遵循，开发人员感受不到，而且发送的请求服务端是能够访问到的，只是结果被浏览器拦截了。
之所以会跨域，是因为受到了同源策略的限制。这是一个用于隔离潜在恶意文件的重要安全机制。

为什么会出现跨域

简单请求和非简单请求

通过浏览器发送请求的时候会被分为两种请求：简单请求(simple request)和非简单那请求(not-so-simple-request)。

只要同时满足以下两大条件，就属于简单请求:

（1) 请求方法是以下三种方法之一：

HEAD
GET
POST
（2）HTTP的头信息不超出以下几种字段：

Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。

预检请求

在发送非简单请求的时候浏览器会发送一个OPTIONS类型的请求。

下面是服务端和客户端完整的信息交互。首次交互是预检请求/响应：
OPTIONS /doc HTTP/1.1
Host: bar.other
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Connection: keep-alive
Origin: https://foo.example
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER, Content-Type

HTTP/1.1 204 No Content
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2
Access-Control-Allow-Origin: https://foo.example
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400
Vary: Accept-Encoding, Origin
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive

这里要注意的是Origin 和Access-Control-Allow-Origin 一个是浏览器发送到预检请求携带的请求源浏览器会自动添加，一个是服务端的验证（有时是*）。

如果你的请求返回的时候服务端不一致，那么浏览器会认为这是不同源的跨域，浏览器默认会禁止这种操作，拒绝渲染该内容。