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，值为*，便可，以下图：

 

添加生效后，通过测试，问题解决了！