AI 助理
备案控制台
开发者社区 阿里云支持与服务 文章 正文

CDN - 跨域失败排查

2019-09-01 3590
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
对象存储 OSS，20GB 3个月
推荐场景：
基于PAI-EAS挂载OSS部署AIGC服务 ossutil工具管理OSS
对象存储 OSS，恶意文件检测 1000次 1年
对象存储 OSS，内容安全 1000次 1年
简介： 背景 某个客户在阿里云 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 ###
}

文章标签：
CDN
对象存储
CDN
缓存
应用服务中间件
tengine
nginx
相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
张医博
目录
相关文章
CiiLii西里网
|
6月前
|
域名解析 缓存 安全
cdn服务器连接异常怎么办
当遇到CDN服务器连接异常时，可采取以下步骤排查：检查CDN配置，包括域名解析和防火墙设置；清空CDN缓存；测试网络连接；确认源服务器状态；更换CDN服务器；等待恢复；联系服务商；检查本地电脑安全；检查程序代码；保持更新和维护。具体解决步骤需根据实际情况调整。
CiiLii西里网
564 0
飞云觅宙
|
CDN
CDN设置防盗链及使用鉴权功能——cdn鉴权功能开启
CDN设置防盗链及使用鉴权功能——cdn鉴权功能开启自制脑图
飞云觅宙
305 0
CDN设置防盗链及使用鉴权功能——cdn鉴权功能开启
游客phojfecwcv6ze
|
JavaScript 前端开发 CDN
项目部署在内网导致CDN请求失败问题解决
项目部署在内网导致CDN请求失败问题解决
游客phojfecwcv6ze
390 0
项目部署在内网导致CDN请求失败问题解决
程序员麻辣烫
|
缓存 运维 负载均衡
CDN请求过程详解
CDN主要是让用户访问资源的时候，能从离用户距离很近的CDN节点进行获取，不必到真正提供服务的机器上获取。所以CDN可以
程序员麻辣烫
652 0
胡夫
|
CDN Windows
全站加速WebSocket偶发访问失败-劫持行为
对于能复现的问题，可以尝试抓包分析具体的请求得出结论。劫持行为可以通过配置HTTPS来改善。
胡夫
409 0
胡夫
|
安全 应用服务中间件 nginx
CDN页面优化不生效排查遇到的坑
如果源站响应给CDN的数据是Gzip压缩以后的数据会导致CDN的页面优化不生效。本文详细讲述了问题的原因以及排查过程，并讲述了Nginx关于Gzip的压缩配置，同时介绍了CDN作为代理服务，引入了Via header以后对Nginx服务器的影响。
胡夫
6258 1
CDN页面优化不生效排查遇到的坑
胡夫
|
域名解析 安全 对象存储
CDN访问异常篇之403错误
使用阿里云 CDN 加速站点访问后出现403错误，通常情况下可能是由域名配置、CDN安全策略以及源站响应403导致。CDN的Response Headers返回的错误字段明确标识了该403是什么原因引起的，本文详细介绍了CDN常见的引发403错误的问题场景。
胡夫
12948 2
CDN访问异常篇之403错误
胡夫
|
缓存 安全 网络协议
CDN访问异常篇之502/503/504错误
当客户使用阿里云 CDN 加速站点访问后，客户端的请求将首先发送到 CDN 的 L1 节点（一级节点），再回源到L2节点（二级节点），然后再回源到源站。因此如果访问过程中出现问题就可能涉及到多级网络链路的问题。当CDN回源源站异常失败时就会出现5xx的错误，主要包括502 Bad Gateway、503 Service Temporarily Unavailable、504 Gateway Time-out。很多情况下是因为一些细节被忽略了导致了错误的发生，本文介绍了一些常见的引发5xx错误的问题场景。
胡夫
13255 2
CDN访问异常篇之502/503/504错误
技术课堂的搬运工~
|
域名解析 应用服务中间件 对象存储
【CDN 常见问题】CDN回源Host的意义
CDN的配置项中包括源站设置和回源host设置两个参数。这两个参数概念可能会出现混淆并且设置错误会导致访问出现异常，因此本文主要向大家介绍源站设置和回源host两个参数的概念和设置方法。
技术课堂的搬运工~
1184 0
【CDN 常见问题】CDN回源Host的意义
技术课堂的搬运工~
|
缓存 tengine 前端开发
CDN - 跨域失败排查
某个客户在阿里云 CDN 配置了加速域名 al.p2.com ，客户自己的主站域名 www.a.com 加载 al.p2.com 下的资源出现跨域的报错； 了解跨域 跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。
技术课堂的搬运工~
476 0
CDN - 跨域失败排查