开发者社区> 阿里云支持与服务> 正文

CDN - 跨域失败排查

简介: 背景某个客户在阿里云 CDN 配置了加速域名 al.p2.com ,客户自己的主站域名 www.a.com 加载 al.p2.com 下的资源出现跨域的报错;了解跨域跨域资源共享(CORS) 是一种机制,它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。

背景

image

某个客户在阿里云 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 上配置跨域的相关头信息,具体配置如下;

image

  • Access-Control-Allow-Origin(是跨域时必须配置的,其他的可选择性配置)
  • Access-Control-Allow-Headers
  • Access-Control-Allow-Methods
  • Access-Control-Max-Age
  • Access-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 ###
}

版权声明:本文中所有内容均属于阿里云开发者社区所有,任何媒体、网站或个人未经阿里云开发者社区协议授权不得转载、链接、转贴或以其他方式复制发布/发表。申请授权请邮件developerteam@list.alibaba-inc.com,已获得阿里云开发者社区协议授权的媒体、网站,在转载使用时必须注明"稿件来源:阿里云开发者社区,原文作者姓名",违者本社区将依法追究责任。 如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:developer2020@service.aliyun.com 进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
上一篇:OSS在线迁移服务剖析 下一篇:CDN - 访问出现 503 排查
阿里云支持与服务
使用钉钉扫一扫加入圈子
+ 订阅

分享阿里云支持与服务团队最佳实践、经典案例与故障排查。

官方博客
文档