阿里云CDN+OSS跨域访问设置教程

阿里云 OSS 跨域设置

OSS 提供 HTML5 协议中的跨域资源共享 CORS 设置,帮助您实现跨域访问。当 OSS 收到一个跨域请求(或者 OPTIONS 请求)时,会读取存储空间对应的 CORS 规则,然后进行相应的权限检查。OSS 会依次检查每一条规则,使用第一条匹配的规则来允许请求并返回对应的 header。如果所有规则都匹配失败,则不附加任何 CORS 相关的 header。

操作步骤

  1. 进入 OSS 管理控制台 界面。
  2. 在左侧存储空间列表中,单击目标存储空间名称,打开该存储空间概览页面。
  3. 单击 基础设置 页签,找到 跨域设置 区域,然后单击 设置。
  4. 单击 创建规则,打开 设定跨域规则 对话框。
  5. 设置跨域规则。
    • 来源:指定允许的跨域请求的来源。允许多条匹配规则,以回车为间隔。每个匹配规则允许使用最多一个“*”通配符。
    • 允许 Methods:指定允许的跨域请求方法。
    • 允许 Headers:指定允许的跨域请求 header。允许多条匹配规则,以回车为间隔。每个匹配规则使用最多一个“*”通配符。
    • 暴露 Headers:指定允许用户从应用程序中访问的响应头(例如一个 Javascript 的 XMLHttpRequest 对象)。
    • 缓存时间:指定浏览器对特定资源的预取(OPTIONS)请求返回结果的缓存时间。

      说明: 每个存储空间最多可以配置 10 条规则。

  6. 单击 确定。

阿里云 CDN 跨域设置

Cors 设置跨域访问原理我们都了解,那么设置CDN后,为什么会出现跨域失败呢?

主要原因:

在用户第一次访问cdn,cdn会检查数据没有,回源到源站进行访问。源站对比将数据经过cdn反馈给客户端浏览器。浏览器比对Access-Control-Allow-Origin 后,允许正确,所以跨域正常。 当第二个用户访问时,cdn检测有这个文件,所以会直接给客户端反馈缓存页面。由于CDN之所以失败是因为CDN缓存了OSS未配置cors之前的文件及其头部,造成客户端浏览器判断失败,不允许访问。所以出现了跨域失败。

解决办法:

目前我们CDN直接提供了Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Max-Age

我们可以分别设置参数如下:
注意:参数可以自定义,以下举例

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET POST PUT DELETE HEAD
Access-Control-Max-Age: 3600

这样只要在CDN节点访问就会包含3个头部信息,不会影响正常访问。且在跨域验证保证了正常使用。

测试结果如下:

给TA买糖
共{{data.count}}人
人已赞赏
黑科技

HTTP 常见状态代码解析

2020-4-16 11:23:44

黑科技

PHP获取必应Bing每日图片

2020-4-19 8:28:50

⚠️
Golurending上的部份代码及教程来源于互联网,仅供网友学习交流,未经Golurending作者或上传书面授权,请勿作他用。
若您的权利被侵害,请联系站长 邮箱codesns#163.com(#-@) 或 点击右侧 私信:管理员 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索