网站使用cdn后显示Access-Control-Allow-Origin跨域错误解决办法

 

前言 

今天在设置网站时,有一个资源显示Access-Control-Allow-Origin这个跨域错误,但是图片又是正常使用的,查了下文档也是解决了的,就想着写一篇文章记录一下,相信大家也是会遇到这个问题的。

为什么出现这个问题

首先了解一下,什么是跨域:跨域资源共享CORS(Cross-Origin Resource Sharing)简称跨域访问,是HTML5提供的标准跨域解决方案,允许网页从不同源加载和访问跨域资源,使得跨域数据传输得以安全进行

由于安全限制,浏览器一般会遵循同源策略(Same-Origin Policy),限制网页发起从不同域、子域、协议或端口加载和访问资源的请求,例如example.com无法访问example.org上的资源。通过配置跨域资源共享,可以在CDN服务器端设置相关的响应头,如果访问CDN资源时的请求携带了满足允许规则内的请求头,即可实现跨域资源的加载和访问。

以阿里云为例

登录CDN控制台。

在左侧导航栏,单击域名管理。

在域名管理页面,找到目标域名,单击操作列的管理。

在指定域名的左侧导航栏,单击缓存配置。

单击节点HTTP响应头页签。

单击添加,配置节点HTTP响应头。

请按照以下内容进行选择,设置指定允许的跨域请求的来源,然后单击确定保存配置。

配置示例

如果跨域资源共享的响应头值设置了单个或者多个值(多个值之间用“,”分隔)。

如果用户请求头里携带的“Origin”参数值与被设置的任意一个值精确匹配,就会响应对应的跨域头。

如果都没有精确匹配上,则不响应跨域头。

CDN上设置:Access-Control-Allow-Origin:http://example.com,https://aliyundoc.com。

如果用户请求携带的Origin头是http://example.com,则CDN节点将会响应Access-Control-Allow-Origin:http://example.com。

如果用户请求携带的Origin头是http://aliyundoc.com,则CDN节点将不会响应Access-Control-Allow-Origin(协议头不匹配,用户请求的是HTTP协议,CDN上设置的是HTTPS协议)。

如果用户请求携带的Origin头是https://aliyundoc.com,则CDN节点将会响应Access-Control-Allow-Origin:https://aliyundoc.com。

如果用户请求携带的Origin头是http://aliyun.com,则CDN节点将不会响应Access-Control-Allow-Origin(域名不匹配)。

本文作者:微信公众号:花摇响铃铛