前言
今天在设置网站时,有一个资源显示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(域名不匹配)。
原创文章,作者:速盾高防cdn,如若转载,请注明出处:https://www.sudun.com/ask/14629.html