开发者社区> 张医博> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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 ###
}

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
区块链研习 | 如何分清区块链中的“两根金条”?
智能合约通过它自身的可编程能力,让我们传统合同中只能停留在纸面上而没有真正有效手段实现的条款变得具有可实施性
1336 0
clamp 函数
返回范围内的一个数值。可以使用 clamp 函数将不断增加、减小或随机变化的数值限制在一系列的值中。float clamp(float minnumber, float maxnumber, float parameter)最小数值和最大数值指定返回值的范围。
953 0
《Cisco局域网交换机配置手册(第2版•修订版)》一延伸阅读
本节书摘来自异步社区《Cisco局域网交换机配置手册(第2版•修订版)》一书中延伸阅读,作者 【美】Steve McQuerry , David Jansen , David Hucaby,更多章节内容可以访问云栖社区“异步社区”公众号查看 延伸阅读 Cisco局域网交换机配置手册(第2版•修订版) 涵盖本章主题的更多信息请查阅以下推荐资源。
1087 0
Mongodb Manual阅读笔记:CH8 复制集
8 复制 Mongodb Manual阅读笔记:CH2 Mongodb CRUD 操作Mongodb Manual阅读笔记:CH3 数据模型(Data Models)Mongodb Manual阅读笔记:CH4 管理Mongodb Manual阅读笔记:CH5 安全性Mongodb Ma...
1497 0
Mongodb Manual阅读笔记:CH2 Mongodb CRUD 操作
2 Mongodb CRUD 操作 Mongodb Manual阅读笔记:CH2 Mongodb CRUD 操作Mongodb Manual阅读笔记:CH3 数据模型(Data Models)Mongodb Manual阅读笔记:CH4 管理Mongodb Manual阅读笔记:CH5 ...
909 0
忘记linux中root密码怎么办?两种方法两步教你轻松搞定修改新的密码(仅限CentOS6.X)
忘记了Linux的系统管理员密码时,可以在本地通过进入单用户模式来重置root密码。两种方法(只需两步)具体步骤如下: 方法一: 在进入grub启动菜单的时候 按“a” 键操作编辑 kernel 参数后面加“single”告诉linux内核以单用户模式运行,回车启动即可。
4286 0
+关注
张医博
喜欢钻研新的语言,动手实践自己想要学会的知识。
116
文章
0
问答
来源圈子
更多
作为全球云计算的领先者,阿里云为全球230万企业提供着云计算服务,服务范围覆盖200多个国家和地区。我们致力于为企业、政府等组织机构提供安全可靠的云计算服务,给用户带来极速愉悦的服务体验。
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载