解决CloudFront静态资源报No 'Access-Control-Allow-Origin' header is present on the requested resource的错误

2021-01-18

CORS前提

为了能够正确返回相应头,首先需要通过以下三点来验证

  1. 请求源的允许Access-Control-Allow-Origin响应头
  2. CloudFront分配转发相关的标头
  3. CloudFront分配的缓存行为允许HTTP请求的OPTIONS方法

配置步骤

在S3的桶对应权限配置允许的cors响应头

[
  {
    "AllowedHeaders": [
        "*"
    ],
    "AllowedMethods": [
        "HEAD",
        "GET",
        "PUT",
        "POST",
        "DELETE"
    ],
    "AllowedOrigins": [
        "*"
    ],
    "ExposeHeaders": [],
    "MaxAgeSeconds": 88888888
  }
]

然后在cloudfront配置缓存策略,在策略选项卡,创建一个策略,确保以下信息正确填写

设置TTL,Headers选择Whitelist后配置OriginAccess-Control-Request-MethodAccess-Control-Reqeust-Headers即可

配置完成后可以通过curl命令进行验证

curl -H "origin: kelen.com" -v "https://www.xxx.com/xxx.jpg"

配置成功后就会返回以下信息

< HTTP/2 200 
< content-type: image/jpeg
< content-length: 93073
< date: Tue, 19 Jan 2021 06:33:56 GMT
< access-control-allow-origin: *
< access-control-allow-methods: HEAD, GET, PUT, POST, DELETE
< access-control-expose-headers: x-amz-server-side-encryption, x-amz-request-id, x-amz-id-2, ETag
< access-control-max-age: 3000
< last-modified: Sat, 12 Sep 2020 09:55:43 GMT
< etag: "87e9495aee75c14a6632aeaddcdaee46"
< accept-ranges: bytes
< server: AmazonS3

实战经验

在canvas绘制图片的时候,经常会报跨域问题,只需要针对img标签设置 origin="anonymous" 就可以解决这个问题

注意,CloudFront需要在请求头需要带上origin才会返回对应的cors相关对响应头

标签: 安全

如果本文对您有所帮助,可以扫下面二维码给我支持,您的鼓励是我前进的动力!

微信

支付宝

目录

评论

*
*

正在加载验证码......

最新评论

  • 无评论
相关推荐
网站安全之内容安全策略
什么是安全策略 内容安全策略 (CSP) 是一个额外的安全层,用于检测并削弱某些特定类型的攻击,包括跨站脚本 (XSS...
web安全-dns劫持
什么是DNS 域名系统(英文:DomainNameSystem,缩写:DNS)是互联网的一项服务。它作为将域名和IP地...
xss跨站脚本攻击
XSS的定义 XSS(Cross Site Scripting),指的是跨站脚本攻击,攻击者在网页代码中注入脚本,当用...