阿里云 OSS + CDN 方案下静态资源跨域访问失败解决

 Technique  comment

新项目架构使用动静分离部署方式进行部署,静态资源存放至 OSS 对象存储中,对接 CDN 进行内容分发,绑定静态资源的域名进行引入使用。

缘起

动静分离后,静态资源(CSS、JS、字体、图片)放置在 OSS 对象存储中,对接 CDN 服务。在用户第一次访问时,CDN会检查到数据没有缓存,回源到源站进行访问。源站对比将数据经过 CDN 反馈给客户端浏览器。浏览器比对 Access-Control-Allow-Origin 后,允许正确,所以跨域正常。当第二个用户访问时,CDN 检测有这个文件,所以会直接给客户端反馈缓存页面。由于 CDN 未配置跨域的请求头,造成客户端浏览器判断失败,不允许访问,所以出现了跨域失败。

状况

使用中的前端页面地址为 https://www.domain.com/hx/mall/index.html
引用的静态文件资源地址为 https://static-ft.domain.com/hx/font/front.woff

小贴士:静态资源的域名和主页的域名不一致导致存在跨域问题。

解决

阿里云 CDN 服务为用户提供了配置 HTTP 请求头的方式,让用户可以快速解决跨域问题。

进入控制台,切换到 CDN 产品中,进入需要添加请求头的 CDN 实例,点击左侧“缓存设置”,选择“HTTP头”

阿里云提供了以下参数来解决跨域问题。

参数 取值
Access-Control-Allow-Origin *
Access-Control-Allow-Methods POST/GET/HEAD/PUT/DELETE
Access-Control-Max-Age 3600

添加需要配置跨域的域名即可,实际上可以使用 * 来全部允许,但是不推荐这样进行使用。

小贴士:需要注意的是 Access-Control-Allow-Origin 若不使用 * 使用域名的情况下,不支持域名中使用通配符(比如不支持 *.domain.com 之类的值)并且使用域名的情况下必须指定协议及端口(若未修改端口的情况下)。

如图所示:添加的跨域 origin 为 https://www.domain.com 即可,稍等片刻访问尝试后,可见其状态变更为“正常”。

附录

相关链接

参考链接

回复