CDN+OSS跨域访问失败原因及处理方法

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

我们可以分别设置参数如下:

注意:参数可以自定义,以下只是举例

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