作者：张医博
背景
某个客户在阿里云 CDN 配置了加速域名 al.p2.com ，客户自己的主站域名 www.a.com 加载 al.p2.com 下的资源出现跨域的报错；
了解跨域
跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。
比如，站点 http://domain-a.com 的某 HTML 页面通过 的 src 请求 http://domain-b.com/image.jpg。网络上的许多页面都会加载来自不同域的CSS样式表，图像和脚本等资源。
出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。 例如，XMLHttpRequest和Fetch API遵循同源策略。 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源，除非响应报文包含了正确CORS响应头。
跨域详细介绍
配置跨域
前面了解跨域头，那么允许哪些域名、请求方式、header 能跨域，需要在 CDN 上配置跨域的相关头信息，具体配置如下；
-
Access-Control-Allow-Origin
（是跨域时必须配置的，其他的可选择性配置） Access-Control-Allow-HeadersAccess-Control-Allow-MethodsAccess-Control-Max-AgeAccess-Control-Expose-Headers
效果对比
配置前，没有跨域头只能正常的响应 200 ，但没有跨域的响应头；
curl -vo /dev/null http://www.zhangyb.mobi/1.txt -H "Origin: http://wsa.com"
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
0 0 0 0 0 0 0 0 --:--:-- --:--:-- --:--:-- 0* Trying 101.37.183.169...
* TCP_NODELAY set
* Connected to www.zhangyb.mobi (101.37.183.169) port 80 (#0)
> GET /2.txt HTTP/1.1
> Host: www.zhangyb.mobi
> User-Agent: curl/7.54.0
> Accept: */*
> Origin: http://wsa.com
>
< HTTP/1.1 200 OK
< Server: Tengine
< Content-Type: text/plain
< Content-Length: 0
< Connection: keep-alive
< Date: Sun, 01 Sep 2019 04:50:37 GMT
< x-oss-request-id: 5D6B4E1D96CC86879C2DF8DA
< Accept-Ranges: bytes
< ETag: "D41D8CD98F00B204E9800998ECF8427E"
< Last-Modified: Mon, 29 Jul 2019 11:23:19 GMT
< x-oss-object-type: Normal
< x-oss-hash-crc64ecma: 0
< x-oss-storage-class: Standard
< Cache-Control: public, max-age= 200
< Content-MD5: 1B2M2Y8AsgTpgAmY7PhCfg==
< Ali-Swift-Global-Savetime: 1567313437
< Via: cache15.l2em21-1[54,200-0,M], cache18.l2em21-1[58,0], cache16.cn1576[0,200-0,H], cache5.cn1576[1,0]
< Age: 22
< X-Cache: HIT TCP_MEM_HIT dirn:-2:-2
< X-Swift-SaveTime: Sun, 01 Sep 2019 04:50:37 GMT
< X-Swift-CacheTime: 200
< Timing-Allow-Origin: *
< EagleId: 6525b79915673134596861073e
配置后，既响应了 200 ，又反馈了跨域头；
curl -vo /dev/null http://www.zhangyb.mobi/1.txt -H "Origin: http://wsa.com"
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
0 0 0 0 0 0 0 0 --:--:-- --:--:-- --:--:-- 0* Trying 101.37.183.147...
* TCP_NODELAY set
* Connected to www.zhangyb.mobi (101.37.183.147) port 80 (#0)
> GET /1.txt HTTP/1.1
> Host: www.zhangyb.mobi
> User-Agent: curl/7.54.0
> Accept: */*
>
< HTTP/1.1 200 OK
< Server: Tengine
< Content-Type: text/plain
< Content-Length: 158
< Connection: keep-alive
< Date: Sun, 01 Sep 2019 04:09:42 GMT
< x-oss-request-id: 5D6B4486B3B1C7F5CA2702FE
< Accept-Ranges: bytes
< ETag: "2C87D6AFF73B013CF6480719C1F940CB"
< Last-Modified: Tue, 30 Jul 2019 11:40:52 GMT
< x-oss-object-type: Normal
< x-oss-hash-crc64ecma: 12710893214583825356
< x-oss-storage-class: Standard
< Cache-Control: public, max-age= 200
< Access-Control-Allow-Origin: http://*.taoboa.com
< Access-Control-Allow-Credentials: true
< Access-Control-Allow-Methods: HEAD, DELETE, POST, GET, PUT
< Access-Control-Max-Age: 0
< Content-MD5: LIfWr/c7ATz2SAcZwflAyw==
< x-oss-server-time: 43
< Via: cache20.l2em21-1[39,304-0,H], cache4.l2em21-1[94,0], cache2.cn1576[100,200-0,H], cache17.cn1576[116,0]
< Ali-Swift-Global-Savetime: 1566821302
< Age: 0
< X-Cache: HIT TCP_REFRESH_HIT dirn:3:1032102356
< X-Swift-SaveTime: Sun, 01 Sep 2019 04:09:42 GMT
< X-Swift-CacheTime: 200
< Timing-Allow-Origin: *
< EagleId: 6525b7a515673109828126775e
<
{ [158 bytes data]
100 158 100 158 0 0 367 0 --:--:-- --:--:-- --:--:-- 367
* Connection #0 to host www.zhangyb.mobi left intact特殊情况
- 有时候会遇到 CDN 没有配置跨域头，但是测试发现有跨域头，这种情况是不是也算配置了跨域头呢？
这种情况先固定原站测试一下，看原站是否正确的配置了跨域头，如下面测试是原站配置了跨域头，当原站配置的跨域头并且返回给 CDN 情况下，CDN 就会缓存下来原站的跨域响应头，可以图2 测试；
curl -vo /dev/null http://li.oss-cn-hangzhou.aliyuncs.com/2.txt -H "Origin: http://wsa.com"
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
0 0 0 0 0 0 0 0 --:--:-- --:--:-- --:--:-- 0* Trying 118.31.219.224...
* TCP_NODELAY set
* Connected to liupeng72.oss-cn-hangzhou.aliyuncs.com (118.31.219.224) port 80 (#0)
> GET /2.txt HTTP/1.1
> Host: li.oss-cn-hangzhou.aliyuncs.com
> User-Agent: curl/7.54.0
> Accept: */*
> Origin: http://wsa.com
>
< HTTP/1.1 200 OK
< Server: AliyunOSS
< Date: Sun, 01 Sep 2019 05:13:48 GMT
< Content-Type: text/plain
< Content-Length: 0
< Connection: keep-alive
< x-oss-request-id: 5D6B538CDC655D951D973ED5
< Access-Control-Allow-Origin: *
< Access-Control-Allow-Methods: GET
< Access-Control-Max-Age: 0
< Accept-Ranges: bytes
< ETag: "D41D8CD98F00B204E9800998ECF8427E"
< Last-Modified: Mon, 29 Jul 2019 11:23:19 GMT
< x-oss-object-type: Normal
< x-oss-hash-crc64ecma: 0
< x-oss-storage-class: Standard
< Cache-Control: public, max-age= 200
< Content-MD5: 1B2M2Y8AsgTpgAmY7PhCfg==
即使访问 CDN 不加跨域请求头，也可以看到请求 CDN 结果反馈的跨域头，但这个头并不是在 CDN 上配置的，而是缓存的原站的响应头给客户端的，且一但文件缓存过期，跨域头就失效，需要回源重新获取，假设原站去掉了缓存头，跨域的请求就会失败，保险起见需要在 CDN 配置跨域头；
图二测试
curl -vo /dev/null http://www.zhangyb.mobi/2.txt
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
0 0 0 0 0 0 0 0 --:--:-- --:--:-- --:--:-- 0* Trying 101.37.183.143...
* TCP_NODELAY set
* Connected to www.zhangyb.mobi (101.37.183.143) port 80 (#0)
> GET /2.txt HTTP/1.1
> Host: www.zhangyb.mobi
> User-Agent: curl/7.54.0
> Accept: */*
> Origin: http://wsa.com
>
< HTTP/1.1 200 OK
< Server: Tengine
< Content-Type: text/plain
< Content-Length: 0
< Connection: keep-alive
< Date: Sun, 01 Sep 2019 05:14:46 GMT
< x-oss-request-id: 5D6B53C6880904BCDAB5C3DB
< Access-Control-Allow-Origin: *
< Access-Control-Allow-Methods: GET
< Access-Control-Max-Age: 0
< Accept-Ranges: bytes
< ETag: "D41D8CD98F00B204E9800998ECF8427E"
< Last-Modified: Mon, 29 Jul 2019 11:23:19 GMT
< x-oss-object-type: Normal
< x-oss-hash-crc64ecma: 0
< x-oss-storage-class: Standard
< Cache-Control: public, max-age= 200
< Content-MD5: 1B2M2Y8AsgTpgAmY7PhCfg==
< Via: cache15.l2em21-1[31,304-0,H], cache22.l2em21-1[60,0], cache16.cn1576[66,200-0,H], cache4.cn1576[68,0]
< Ali-Swift-Global-Savetime: 1567313437
< Age: 0
< X-Cache: HIT TCP_REFRESH_HIT dirn:-2:-2
< X-Swift-SaveTime: Sun, 01 Sep 2019 05:14:46 GMT
< X-Swift-CacheTime: 200
< Timing-Allow-Origin: *
< EagleId: 6525b79815673148867943641e
Nginx 配置跨域
原站如果用的 Nginx 做的 webserver 或者缓存服务，如果增加跨域配置呢？可以 vi /etc/nginx/nginx.conf，在对应的 location 级别或者 server 级别加入如下配置块即可；
http {
###start####
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
###end ###
}
