文档

请求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