文章目录

  • 简介
  • CORS举例
  • CORS protocol
    • HTTP request headers
    • HTTP response headers
  • 基本CORS
  • Preflighted requests
  • 带认证的请求
  • 总结

简介

什么是跨域资源共享呢? 我们知道一个域是由scheme、domain和port三部分来组成的，这三个部分可以唯一标记一个域，或者一个服务器请求的地址。跨域资源共享的意思就是服务器允许其他的域来访问它自己域的资源。

CORS是一个基于HTTP-header检测的机制，本文将会详细对其进行说明。

CORS举例

为了安全起见，一般一个域发起的请求只能获取该域自己的资源，因为域资源内部的互相调用被认为是安全的。

但是随着现代浏览器技术和ajax技术的发展，渐渐的出现了从javascript中去请求其他域资源的需求，我们把这样的需求叫做跨域请求。

比如说客户端从域http://www.flydean.com向域http://www.abc.com/data.json请求数据。

那么客户端是怎么知道服务器是否支持CORS的呢？

这里会使用到一个叫做preflight的请求，这个请求只是向服务器确认是否支持要访问资源的跨域请求，当客户端得到响应之后，才会真正的去请求服务器中的跨域资源。

虽然是客户端去设置HTTP请求的header来进行CORS请求，但是服务端也需要进行一些设置来保证能够响应客户端的请求。所以本文同时适合前端开发者和后端开发者。

CORS protocol

没错，任意一种请求要想标准化，那么必须制定标准的协议，CORS也一样，CORS protocol主要定义了HTTP中的请求头和响应头。我们分别来详细了解。

HTTP request headers

首先是HTTP的请求头。请求头是客户端请求资源时所带的数据。CORS请求头主要包含三部分。

第一部分是Origin，表示发起跨域资源请求的request或者preflight request源：

Origin: <origin>

Origin只包含server name信息，并不包含任何PATH信息。

注意，Origin的值可能为null

第二部分是Access-Control-Request-Method，这是一个preflight request，告诉服务器下一次真正会使用的HTTP资源请求方法：

Access-Control-Request-Method: <method>

第三部分是Access-Control-Request-Headers，同样也是一个preflight request，告诉服务器下一次真正使用的HTTP请求中要带的header数据。header中的数据是和server端的Access-Control-Allow-Headers相对应的。

Access-Control-Request-Headers: <field-name>[, <field-name>]*

HTTP response headers

有了客户端的请求，还需要服务器端的响应，我们看下服务器端都需要设置那些HTTP header数据。

  1. Access-Control-Allow-Origin

Access-Control-Allow-Origin表示服务器允许的CORS的域，可以指定特定的域，也可以使用*表示接收所有的域。

Access-Control-Allow-Origin: <origin> | *

要注意的是，如果请求带有认证信息，则不能使用*。

我们看一个例子：

Access-Control-Allow-Origin: http://www.flydean.com
Vary: Origin

上面例子表示服务器允许接收来自http://www.flydean.com的请求，这里指定了具体的某一个域，而不是使用*。因为服务器端可以设置一个允许的域列表，所以这里返回的只是其中的一个域地址，所以还需要在下面加上一个Vary:Origin头信息，表示Access-Control-Allow-Origin会随客户端请求头中的Origin信息自动发送变化。

  1. Access-Control-Expose-Headers

Access-Control-Expose-Headers表示服务器端允许客户端或者CORS资源的同时能够访问到的header信息。其格式如下：

Access-Control-Expose-Headers: <header-name>[, <header-name>]*

例如：

Access-Control-Expose-Headers: Custom-Header1, Custom-Header2

上面的例子将向客户端暴露Custom-Header1, Custom-Header2两个header，客户端可以获取到这两个header的值。

  1. Access-Control-Max-Age

Access-Control-Max-Age表示preflight request的请求结果将会被缓存多久，其格式如下：

Access-Control-Max-Age: <delta-seconds>

delta-seconds是以秒为单位。

  1. Access-Control-Allow-Credentials

这个字段用来表示服务器端是否接受客户端带有credentials字段的请求。如果用在preflight请求中，则表示后续的真实请求是否支持credentials，其格式如下：

Access-Control-Allow-Credentials: true
  1. Access-Control-Allow-Methods

这个字段表示访问资源允许的方法，主要用在preflight request中。其格式如下：

Access-Control-Allow-Methods: <method>[, <method>]*
  1. Access-Control-Allow-Headers

用在preflight request中，表示真正能够被用来做请求的header字段，其格式如下：

Access-Control-Allow-Headers: <header-name>[, <header-name>]*

有了CORS协议的基本概念之后，我们就可以开始使用CORS来构建跨域资源访问了。

基本CORS

先来看一个最基本的CORS请求，比如现在我们的网站是http://www.flydean.com,在该网站中的某个页面中，我们希望获取到https://google.com/data/dataA,那么我们可以编写的JS代码如下：

const xhr = new XMLHttpRequest();
const url = 'https://google.com/data/dataA';xhr.open('GET', url);
xhr.onreadystatechange = someHandler;
xhr.send();

该请求是一个最基本的CORS请求，我们看下客户端发送的请求包含哪些数据：

GET /data/dataA HTTP/1.1
Host: google.com
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: http://www.flydean.com

这个请求跟CORS有关的就是Origin，表示请求的源域是http://www.flydean.com。

可能的返回结果如下:

HTTP/1.1 200 OK
Date: Mon, 01 May 2021 00:23:53 GMT
Server: Apache/2
Access-Control-Allow-Origin: *
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xml[…Data…]

上面的返回结果要注意的是Access-Control-Allow-Origin: *，表示服务器允许所有的Origin请求。

Preflighted requests

上面的例子是一个最基本的请求，客户端直接向服务器端请求资源。接下来我们看一个Preflighted requests的例子，Preflighted requests的请求分两部分，第一部分是请求判断，第二部分才是真正的请求。

注意，GET请求是不会发送preflighted的。

什么时候会发送Preflighted requests呢？

当客户端发送OPTIONS方法给服务器的时候，为了安全起见，因为服务器并不一定能够接受这些OPTIONS的方法，所以客户端需要首先发送一个
preflighted requests，等待服务器响应，等服务器确认之后，再发送真实的请求。我们举一个例子。

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://google.com/data/dataA');flydean
xhr.setRequestHeader('cust-head', 'www.flydean.com');
xhr.setRequestHeader('Content-Type', 'application/xml');
xhr.onreadystatechange = handler;
xhr.send('<site>www.flydean.com</site>');

上例中，我们向服务器端发送了一个POST请求，在这个请求中我们添加了一个自定义的header：cust-head。因为这个header并不是HTTP1.1中标准的header，所以需要发送一个Preflighted requests先。

OPTIONS /data/dataA HTTP/1.1
Host: google.com
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: http://www.flydean.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: cust-head, Content-Type

请求中添加了Access-Control-Request-Method和Access-Control-Request-Headers这两个多出来的字段。

得到的服务器响应如下：

HTTP/1.1 204 No Content
Date: Mon, 01 May 2021 01:15:39 GMT
Server: Apache/2
Access-Control-Allow-Origin: http://www.flydean.com
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: cust-head, Content-Type
Access-Control-Max-Age: 86400
Vary: Accept-Encoding, Origin
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive

响应中返回了Access-Control-Allow-Origin，Access-Control-Allow-Methods和Access-Control-Allow-Headers。

当客户端收到服务器的响应之后，发现配后续的请求，就可以继续发送真实的请求了：

POST /data/dataA HTTP/1.1
Host: google.com
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
cust-head: www.flydean.com
Content-Type: text/xml; charset=UTF-8
Referer: http://www.flydean.com/index.html
Content-Length: 55
Origin: http://www.flydean.com
Pragma: no-cache
Cache-Control: no-cache<site>www.flydean.com</site>

在真实的请求中，我们不需要再发送Access-Control-Request*头标记了，只需要发送真实的请求数据即可。

最后，我们得到server端的响应：

HTTP/1.1 200 OK
Date: Mon, 01 May 2021 01:15:40 GMT
Server: Apache/2
Access-Control-Allow-Origin: http://www.flydean.com
Vary: Accept-Encoding, Origin
Content-Encoding: gzip
Content-Length: 235
Keep-Alive: timeout=2, max=99
Connection: Keep-Alive
Content-Type: text/plain[Some data]

带认证的请求

有时候，我们需要访问的资源需要带认证信息，这些认证信息是通过HTTP cookies来进行传输的，但是对于浏览器来说，默认情况下是不会进行认证的。要想进行认证，必须设置特定的标记：

const invocation = new XMLHttpRequest();
const url = 'https://google.com/data/dataA';function corscall() {if (invocation) {invocation.open('GET', url, true);invocation.withCredentials = true;invocation.onreadystatechange = handler;invocation.send();}
}

上面的例子中，我们设置了withCredentials flag，表示这是一个带认证的请求。

其对应的请求如下：

GET data/dataA HTTP/1.1
Host: google.com
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
Referer: http://www.flydean.com/index.html
Origin: http://www.flydean.com
Cookie: name=flydean

请求中我们带上了Cookie，服务器对应的响应如下：

HTTP/1.1 200 OK
Date: Mon, 01 May 2021 01:34:52 GMT
Server: Apache/2
Access-Control-Allow-Origin: http://www.flydean.com
Access-Control-Allow-Credentials: true
Cache-Control: no-cache
Pragma: no-cache
Set-Cookie: name=flydean; expires=Wed, 31-May-2021 01:34:53 GMT
Vary: Accept-Encoding, Origin
Content-Encoding: gzip
Content-Length: 106
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain[text/plain payload]

服务器返回了Access-Control-Allow-Credentials: true，表示服务器接收credentials认证，并且返回了Set-Cookie选项对客户端的cookie进行更新。

要注意的是如果服务器支持credentials，那么返回的Access-Control-Allow-Origin，Access-Control-Allow-Headers和Access-Control-Allow-Methods的值都不能是*。

总结

本文简单介绍了HTTP协议中的CORS协议，要注意的是CORS实际上是HTTP请求头和响应头之间的交互。

本文已收录于 http://www.flydean.com/cors/

最通俗的解读，最深刻的干货，最简洁的教程，众多你不知道的小技巧等你来发现！

欢迎关注我的公众号:「程序那些事」,懂技术，更懂你！

安全系列之:跨域资源共享CORS相关推荐

  1. 跨域资源共享CORS详解

    最近深入了解了CORS的相关东西,觉得阮一峰老师的文章写得最详细易懂了,所有转载作为学习笔记. 原文地址:跨域资源共享 CORS 详解 CORS是W3C的一个标准,全称是跨域资源共享(Cross-or ...

  2. xmlhttprequest 跨域_跨域资源共享(CORS)安全性

    跨域资源共享(CORS)安全性 背景 提起浏览器的同源策略,大家都很熟悉.不同域的客户端脚本不能读写对方的资源.但是实践中有一些场景需要跨域的读写,所以出现了一些hack的方式来跨域.比如在同域内做一 ...

  3. 跨域资源共享 CORS

    简介 CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing). 它允许浏览器向跨源服务器,发出XMLHttpRequest请 ...

  4. AJAX跨域资源共享 CORS 详解

    CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing). 它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从 ...

  5. Access-Control-Allow- 设置跨域资源共享CORS详解

    跨域访问的项目常在过滤器或者拦截器中添加如下配置: response.setHeader("Access-Control-Allow-Origin", "*") ...

  6. php跨域资源共享,CORS 跨域资源共享

    CORS (Cross-Origin Resource Sharing) 跨域资源共享 为什么需要 CORS 首先,跨域指的是同一个域名下的资源,同时要注意域名与子域名,比如 developers.e ...

  7. 跨域资源共享 CORS 详解

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin re ...

  8. Spring Boot CORS跨域资源共享实现方案

    同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能 同源策略限制cookie 等信息的跨源网页读取,可以保护本地用户信息 同源策略限制跨域 aja ...

  9. CORS跨域资源共享漏洞

    目录 同源策略 解决跨域问题的方案 CORS CORS原理 CORS漏洞攻击流程 CORS漏洞案例演示 CORS漏洞挖掘思考 漏洞危害 漏洞修复 跨域资源共享 (CORS) 是一种浏览器机制,可以对位 ...

最新文章

  1. 我用AI分析了《赛博朋克 2077》的评价，发现真爱粉都是来吸猫的
  2. WPF 自定义标题栏 自定义菜单栏
  3. Phoenix Tips (12) 跟踪 Tracing
  4. Java jmap查看堆内存
  5. SpringSecurity分布式整合之验证认证的过滤器
  6. （SSO）单点登录原理和总结
  7. 将Chrome设置为Jupyter_notebook的默认浏览器
  8. Invalid format of Import utility nameVerify that ORACLE_HOME is properly oracle11.2g 无法imp，dmp
  9. c语言中一些公用的方法
  10. 将List类型数据转为json
  11. C++ 判断矩形是否相交
  12. python seek(0)_seek() 方法
  13. 已知某分页系统，主存容量为 64K 字节，页面大小为 1K，对一个 4 页大的作 业，其 0、1、2、3 页分别被分配到主存的 2、4、6、7 块中，试：将十进制的逻 辑地址 1023、2500、35
  14. 微信开发者工具的下载及小程序项目创建
  15. 《12个工作的基本》读书分享
  16. Xenon's Attack on the Gangs Codeforces Round #614 (Div. 2)
  17. word使用：默认粘贴方式的更改
  18. winrar 去广告_winRAR去广告版软件安装教程
  19. win7笔记本外接显示器html,详解笔记本电脑连接外部显示器的操作流程
  20. 八卦:大量放送Gmail,Orkut,Wallop的邀请函

热门文章

  1. 小型微型计算机查重修改,基于学习算法的软件故障记录查重与修复人员指派问题研究...
  2. python实战一个完整的项目-Python项目开发实战（第2版）高清晰PDF完整版+代码
  3. PostgreSQL 慢查询获取
  4. 合创视觉APP设计色彩搭配重点
  5. python svg 转 png
  6. Unity 2D角色控制器（横板滚轴）
  7. JS Cookie当天24点过期，chrome时差问题
  8. 计算机屏幕截图给播放器黑屏,跟大家学习电脑截图黑屏的解决方法
  9. SharePoint - 修改web.config是否需要重启IIS？
  10. asp.net基于BS的图书销售管理系统的设计与实现