文章目录
1、CORS
1、为什么会出现？
因为XHR以及Fetch遵循同源策略，意味着只用这些API进行异步加载时，只能加载到应用程序的同一个域(协议、IP、端口一样)的资源，但是在实际开发过程中，难免会因为各种原因而导致浏览器与服务器处于不同的域，因此CORS便出生了。
2、CORS是什么？
cross-origin sharing from a server perspective 即 CORS， 跨域资源共享，一种基于HTTP头的机制，该机制允许服务器标示除了它自己以外的origin（域、协议、端口）,这样浏览器可以访问加载这些资源。
跨域资源共享还通过一种机制来检查服务器是否允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨域资源的预检请求。在预检中，浏览器发送的头中标示有HTTP方法和真实请求中会用到的头。
通俗地讲，CORS就是通过添加
Headers字段，以允许浏览器与服务器之间可以跨域访问.
观察一下浏览器的请求头
// 请求方法 请求路径 GET /resources/public-data/ HTTP/1.1 // 主机地址 Host: bar.other // 用户代理 User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre // 允许接收的数据格式 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 允许接收的数据的字符集格式 Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 // 是否为长链接 Connection: keep-alive // 参照 Referer: http://foo.example/examples/access-control/simpleXSInvocation.html // 请求源 Origin: http://foo.example
观察一下响应头
// 协议 响应状态码 HTTP/1.1 200 OK Date: Mon, 01 Dec 2008 00:23:53 GMT // 服务器 Server: Apache/2.0.61 // 允许的请求源 Access-Control-Allow-Origin: * // 保持链接 Keep-Alive: timeout=2, max=100 Connection: Keep-Alive Transfer-Encoding: chunked // 内容类型 Content-Type: application/xml
2、CORS相关的部分首部字段
1、请求首部
1、Origin
表明预检请求或实际请求的源站。
参数的值为源站的
URI， 它不包括任何的路径信息，只是服务器名称
2、Access-Control-Request-Method
用于预检请求。
其作用是将是继请求所使用的
HTTP方法告诉服务器
2、响应首部
1、Access-Control-Allow-Origin
Access-Control-Allow-Origin: <origin> | *
其中，origin 参数的值指定了允许访问该资源的外域 URI。对于不需要携带身份凭证的请求，服务器可以指定该字段的值为通配符，表示允许来自所有域的请求。
Access-Control-Allow-Origin: http://mozilla.com
如果服务端指定了具体的域名而非==“*”==，那么响应首部中的 Vary 字段的值必须包含 Origin。这将告诉客户端：服务器对不同的源站返回不同的内容。
2、Access-Control-Max-Age
指定了preflight请求的结果能够被缓存多久
3、Access-Control-Allow-Credentials
☞定了当浏览器的credentials设置为true时是否允许浏览器读取response的内容。当用在对preflight预检测请求的响应中时，它指定了实际的请求是否可以使用credentials。请注意：简单 GET 请求不会被预检；如果对此类请求的响应中不包含该字段，这个响应将被忽略掉，并且浏览器也不会将相应内容返回给网页。
ps: 欢迎一起交流学习
