CDN惹的祸:记一次使用OSS设置跨域资源共享(CORS)不生效的问题

原文:

https://www.lastupdate.net/4669.html

昨天H5组的开发反馈了一个问题,说浏览器收不到跨域的配置,提示:Failed to load https://nnmjstore.xxx.com/records/34e38a6b-0aaf-4bc3-af73-1d9dffcdb6f8_cdhzmj_15: No ‘Access-Control-Allow-Origin‘ header is present on the requested resource. Origin ‘http://cdhzmjstore.xxx.com‘ is therefore not allowed access.

即:cdhzmjstore.xxx.com使用Ajax(我没具体问,猜可能是上传文件吧)访问nnmjstore.xxx.com上的文件失败了。

而nnmjstore.xxx.com的文件是存放在阿里云oss上面的,我记得已经设置过跨域了,马上去检查一下,发现是没问题的。为了解决问题,干脆把来源都放开了,如下图:

但是比较悲催的是,还是收到同样的提示错误。。。

于是又翻了下阿里云的OSS文档,摘录如下:

同源策略

跨域访问,或者说JavaScript的跨域访问问题,是浏览器出于安全考虑而设置的一个限制,即同源策略。当来自于A网站的页面中的JavaScript代码希望访问B网站的时候,浏览器会拒绝该访问,因为A、B两个网站是属于不同的域。

在实际应用中,经常会有跨域访问的需求,比如用户的网站www.a.com,后端使用了OSS。在网页中提供了使用JavaScript实现的上传功能,但是在该页面中,只能向www.a.com发送请求,向其他网站发送的请求都会被浏览器拒绝。这样就导致用户上传的数据必须从www.a.com中转。如果设置了跨域访问的话,用户就可以直接上传到OSS而无需从www.a.com中转。

跨域资源共享的实现

跨域资源共享(Cross-Origin Resource Sharing),简称CORS,是HTML5提供的标准跨域解决方案,OSS支持CORS标准来实现跨域访问。具体的CORS规则可以参考W3C CORS规范。其实现如下:

  1. CORS通过HTTP请求中附带Origin的Header来表明自己来源域,比如上面那个例子,Origin的Header就是www.a.com。
  2. 服务器端接收到这个请求之后,会根据一定的规则判断是否允许该来源域的请求。如果允许的话,服务器在返回的响应中会附带上Access-Control-Allow-Origin这个Header,内容为www.a.com来表示允许该次跨域访问。如果服务器允许所有的跨域请求,将Access-Control-Allow-Origin的Header设置为*即可,
  3. 浏览器根据是否返回了对应的Header来决定该跨域请求是否成功,如果没有附加对应的Header,浏览器将会拦截该请求。如果是非简单请求,浏览器会先发送一个OPTIONS请求来获取服务器的CORS配置,如果服务器不支持接下来的操作,浏览器也会拦截接下来的请求。

OSS提供了CORS规则的配置从而根据需求允许或者拒绝相应的跨域请求。该规则是配置在Bucket级别的。详情可以参考PutBucketCORS

这里有几个要点:

  • CORS相关的Header附加等都是浏览器自动完成的,用户不需要有任何额外的操作。CORS操作也只在浏览器环境下有意义。
  • CORS请求的通过与否和OSS的身份验证是完全独立的,即OSS的CORS规则仅仅是用来决定是否附加CORS相关的Header的一个规则。是否拦截该请求完全由浏览器决定。
  • 使用跨域请求的时候需要关注浏览器是否开启了Cache功能。当运行在同一个浏览器上分别来源于www.a.com和www.b.com的两个页面都同时请求同一个跨域资源的时候,如果www.a.com的请求先到达服务器,服务器将资源带上Access-Control-Allow-Origin的Header为www.a.com返回给用户。这个时候www.b.com又发起了请求,浏览器会将Cache的上一次请求返回给用户,此时Header的内容和CORS的要求不匹配,就会导致后面的请求失败。

这时候突然想起,为了加速访问,我们在OSS的前端使用了阿里云CDN服务,这样的话,CDN有可能覆盖了OSS的设置,也就是说,跨域设置需要在CDN上做。

一时半伙找不到文档,也不会设置,就发了个工单询问。技术工程师响应的超级快,比以往每一次都快,并且直接告诉了方法,确实和我猜测的一样。

在CDN控制台,找到nnmjstore.xxx.com,点设置-》缓存控制-》设置HTTP,添加一个HTTP头,参数为Access-Control-Allow-Origin,值为*,即可,如下图:

添加生效后,经过测试,问题解决了!

原文地址:https://www.cnblogs.com/itfat/p/11351070.html

时间: 2024-08-06 23:00:39

CDN惹的祸:记一次使用OSS设置跨域资源共享(CORS)不生效的问题的相关文章

记一次jq的ajax跨域

今天才了解到小胡子哥说的那段话用jq去跨域,感觉还是有一个挺大的差异的,我一直用原生JS的方法去做,是没问题的,但是用了jq,情况又有所改变,他返回给我的是这样一个error, 我还以为自己对jq的选项不熟,去翻书.查手册.查文档,看到手册和文档给的例子都是没问题的,一直搞不懂为什么命名提交成功,却返回不了数据,去QQ群里找牛人,终于得到了解答了. 原来是一个callback的问题,那位大牛(姑且称之,反正比我牛)说,是我的参数出了问题,在使用jq,百度要把callback命名为cb,所以不能直

都是编译器惹的祸

都是编译器惹的祸,布布扣,bubuko.com

关于Struts2 Action中get和set惹得祸。

代码: 1 public class RandomAction extends PageAction { 2 3 /**随机抽取**/ 4 private IRandomService randomService; 5 6 /**责任民警**/ 7 private IScZrmjService scZrmjService; 8 9 /**企业基本信息**/ 10 private IQyjbxxService qyjbxxService; 11 12 private User user; 13 1

iptables惹的祸

我的工作环境总是一台Mac机+在Mac机上跑的虚拟机(Virtual Box) 有一个错误我总是在犯:宿主机总是无访问到虚拟机里的web服务. 解决方法也很简单:那就是关闭虚拟机上的防火墙!!! [[email protected] ~]# service iptables stop iptables: Flushing firewall rules:                         [  OK ] iptables: Setting chains to policy ACCEP

#pragma pack (n) 惹的祸

今天遇到了一个问题,使用数据流传输的数据在解析的时候数据错位.想了非常久,发现是#pragma pack (n)惹的祸. 首先.解析方使用了编译字节设置,可是在发送方没有使用,于是用相同的结构体解析数据时候,有两个字节被0占用了.后来统一使用.问题解决. 例如以下图的struct结构体:不使用#pragma pack (1)时候,在解析RemotPort后是没问题的,再解析RemotIp的时候,通过字节转换后.ip地址的前两位是0.0.X.X 原因是WORD不够4字节,编译器自己主动填了0占位.

VMware虚拟机采用桥接方式不能上网——都是共享神盾惹的祸!

宿主机是XP,双网卡,一个连接互联网,另一个连接内部生产网,通过来回拔插网线,来切换不同的网络(不允许同时连接两个网络).连接互联网的网卡是Realtek RTL8169,IP是192.168.1.88,通过宽带路由器上网.在VMware Workstation8上建了两个虚拟机,一个是XP,一个Linux.虚拟机采用nat或Host-Only+共享Internet连接时,都能上网,但采用桥接方式确不能上网.测试结果如下表(如不能完全显示,请下载附件后直接打开): Vmware网络 宿主机 虚拟

[ 转自 果壳 原著matrix67 ]Android计算器低级错误?都是二进制惹的祸!

Android 计算器惊现超级大 bug!在 Android 的计算器程序里输入 14.52 - 14.49,计算器竟然说它等于 0.0299999999!其实,这已经是计算机的老毛病了.计算机用二进制来表示数,将会不可避免地产生误差. 听说了 Android 的超级大 bug,我立即在自己的 HTC Hero 上试了一下,果然正如众人所说, 14.52 - 14.49 = 0.0299999999.稍作试验便可发现,一些更为简单的算式也会出现类似的问题,例如在 Android 计算器中输入 1

【转】VS2013 C#WinForm程序构造界面拖动控件NumericUpDown时"未响应“是有道词典惹的祸

很久之前遇到过因为金山词霸和其他软件冲突导致的程序无响应的情况. 没想到今天情况重现,VS2013在可视化编辑NumbericUpDown控件的时候,又出现了”未响应“,发现又是有道词典惹的祸. 可见屏幕取词功能还是应该好好研究的,希望微软和有道之间能协调解决一下!!! 转自:http://blog.csdn.net/smstong/article/details/21018529

加上cdn后字体跨域

@font-face是CSS3中的一个特性,可以把自己定义的Web字体嵌入到网页中,随着@font-face,越来越多的网页采用字体图标作为网页中的小图形. 比如Bootstrap就采用了Glyphicons 字体图标 在Bootstrap的架构下可以免费使用Glyphicons的250多种图标字体.另外一个比较常用的开源图标字体就是Font Awesome了,内含几百种各种size的图标文件,可以很容易实现Fixed Width,Animated Icons,Rotated,Flipped,S