请求CDN加速域名出现跨域问题并提示“The 'Access-Control-Allow-Origin' header has a value 'xxx' that is not equal to the supplied origin”

问题描述

请求CDN加速域名出现跨域报错，具体信息如下：

The 'Access-Control-Allow-Origin' header has a value 'xxx' that is not equal to the supplied origin

问题原因

从问题描述的内容可以看出，CDN响应的Access-Control-Allow-Origin跨域头的Value值，和客户端请求的Origin跨域头不一致，导致浏览器没有响应这个请求。例如，请求跨域头为“Origin:http://域名A”，但是响应的跨域头为“Access-Control-Allow-Origin:http://域名B”。出现该问题的原因有以下三种情况：

• CDN配置的跨域头和客户端请求的Origin不一致
• 源站配置的跨域头被CDN缓存
• 浏览器缓存

解决方案

• CDN配置的跨域头和客户端请求的Origin不一致：
  这种情况需要修改CDN的跨域头配置，配置成和客户端请求的Origin一致。目前CDN默认只能配置一个跨域头，如果实际业务里存在多个Origin的情况下，CDN的跨域响应头值可以配置成“*”，如何配置详情请参见CDN如何通过HTTP头配置跨域资源共享（CORS）。
  
• 源站配置的跨域头被CDN缓存：
  第一次客户端请求的时候，请求跨域头为“Origin:http://域名A”，CDN没有命中缓存，按照规则去回源，由于源站配置了跨域头，响应了“Access-Control-Allow-Origin:http://域名A” ；第二次客户端请求的时候，请求跨域头为“Origin:http://域名B”，但是由于CDN之前已经缓存了第一次请求的数据，从而会直接返回缓存数据，而缓存数据里跨域响应头为“Access-Control-Allow-Origin:http://域名A”，这就导致响应的值和客户端不匹配，导致被浏览器拒绝访问。针对这种情况有以下两种解法：
  • 方案一：
    源站不用配置跨域头，直接在CDN上配置跨域头即可。然后刷新CDN的缓存，将历史缓存都清除掉，如何刷新请参见刷新和预热资源。
  • 方案二：
    在CDN上配置Access-Control-Allow-Origin响应头参数时，将是否允许重复选择为不允许即可，这种情况下当源站响应跨域头时，CDN会去掉源站的响应头，按照CDN的跨域响应头规则响应给客户端。
    
• 浏览器缓存：
  第一次客户端请求的时候，请求跨域头为“Origin:http://域名A”，CDN响应了“Access-Control-Allow-Origin:http://域名A” ；第二次客户端请求的时候，请求跨域头为“Origin:http://域名B”，但是由于浏览器缓存了上一次请求的结果，直接返回了缓存数据，而缓存数据里跨域响应头为“Access-Control-Allow-Origin:http://域名A”，导致响应的值和客户端不匹配，导致被浏览器拒绝访问。
  出现这种问题时，需要强制浏览器的缓存。且为了避免这种情况的发生，建议在CDN上配置Cache-Control为no-cache，强制浏览器不缓存数据。
  

适用于

• CDN
• DCDN