网站使用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（域名不匹配）。

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