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

前言

为什么出现这个问题

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

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

以阿里云为例

1. 登录CDN控制台。
2. 在左侧导航栏，单击域名管理。
3. 在域名管理页面，找到目标域名，单击操作列的管理。
4. 在指定域名的左侧导航栏，单击缓存配置。
5. 单击节点HTTP响应头页签。
6. 单击添加，配置节点HTTP响应头。
7. 请按照以下内容进行选择，设置指定允许的跨域请求的来源，然后单击确定保存配置。

配置示例

示例一

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

• 如果用户请求头里携带的“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（域名不匹配）。

示例二

如果跨域资源共享的响应头值设置了泛域名，则会校验请求头中Origin值是否能匹配上Access-Control-Allow-Origin的泛域名。

CDN上设置：Access-Control-Allow-Origin：http://*.aliyundoc.com。

• 用户请求：Origin：http://demo.aliyundoc.com，则CDN节点将会响应Access-Control-Allow-Origin：http://demo.aliyundoc.com。
• 用户请求：Origin：http://demo.example.com，则CDN节点将不会响应Access-Control-Allow-Origin（域名不匹配）。
• 用户请求：Origin：https://demo.aliyundoc.com，则CDN节点将不会响应Access-Control-Allow-Origin（协议头不匹配，用户请求的是HTTPS协议，CDN上设置的是HTTP协议）。

结语

如果还是没有解决，可以看看你是否使用了储存桶之类的，在储存桶的配置里也要设置。不然也可能会出现这个错误，一般这个错误出现在字体等文件上。