阿里云首页

OSS跨域资源共享(CORS)出现报错的排查方法

问题描述

为了实现跨域访问,保证跨域数据传输的安全进行,阿里云对象存储OSS设置跨域资源共享规则后,在请求OSS资源时发生报错,具体报错信息如下:

  • 浏览器返回的错误类似如下。
    OPTIONS http://bucket.oss-cn-beijing.aliyuncs.com/
    XMLHttpRequest cannot load http://bucket.oss-cn-beijing.aliyuncs.com/. 
    Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
    Origin '{yourwebsiet}' is therefore not allowed access. The response had HTTP status code 403.
    说明:CORS报错一般是站点类应用导致,浏览器中可以查看请求详情。如Chrome浏览器,按F12打开开发者工具,在Network中查看相应元素。
  • OSS返回的错误类似如下。
    <Code>AccessForbidden</Code>
    <Message>
    CORSResponse: This CORS request is not allowed. This is usually because the evalution of Origin,
    request method Access-Control-Request-Method or Access-Control-Requet-Headers are not whitelisted by the resource's CORS spec.
    </Message>
    说明
    • OSS返回的错误可以通过抓包获取。如使用Wireshark,筛选器可以指定为域名,即[$Bucket_Name].oss-cn-beijing.aliyuncs.com,[$Bucket_Name]为Bucket名称。
    • OSS返回的错误也可以通过CORS的oss-h5-upload-js-direct调试程序获取。

问题原因

跨域资源共享(Cross Origin Resource Sharing,简称CORS)可能出现的错误如下所示:

  • 来源(AllowedOrigin)配置不正确。
  • Method(AllowedMethod)配置错误。
  • Allow Header配置错误。
  • Expose Header配置错误。

解决方案

排查CORS跨域规则是否设置正确,具体操作如下:

  1. 登录OSS管理控制台
  2. 单击Bucket列表单击目标Bucket,进入Bucket概览页面。
  3. 在左侧导航栏中选择权限管理>跨域设置,然后单击设置
  4. 单击规则右侧的编辑进行以下配置,配置规则及注意事项请参见更多信息
    • 来源设置成*,确认该配置项无误。如果设置成*后可以成功上传,说明是之前的来源配置错误,请根据规则认真检查。
    • 依次选择允许 Methods的全部选项,即GETPUTDELETEPOSTHEAD,确认该配置项目无误。
    • 允许 Headers配置成*,确认该配置无误。如果设置后可以正常调用,说明之前的允许 Headers配置错误,请根据规则认真检查。
    • 暴露 Headers设置为Etagx-oss-request-id,确认该项配置无误。如果设置后可以正常调用,说明之前的暴露 Headers配置错误,请根据规则认真检查。
  5. 如果问题还是无法解决,请参见设置跨域规则后调用OSS时仍然报“No 'Access-Control-Allow-Origin'”的错误

更多信息

CORS的配置方法一般是针对每个访问来源单独配置规则,勿将多个来源加到一个规则,多个规则之间不要有覆盖冲突。其它的选项只开放需要的权限即可。CORS配置有以下几项:

  • 来源:允许跨域请求的来源,可以同时指定多个来源。配置时需带上完整的域信息,例如:http://10.X.X.100:8001https://www.aliyun.com。注意,不要遗漏了协议名http或https,如果端口不是默认的80,还需要带上端口。如果不能确定域名,可以打开浏览器的调试功能,查看Header中的Origin。域名支持*通配符,每个域名中允许最多使用一个*,例如https://*.aliyun.com。如果来源指定为*,则表示允许所有来源的跨域请求。
  • 允许 Methods:按照需求开通对应的方法即可,调试时可以全部选择。
  • 允许 Headers:允许的跨域请求Header。允许配置多条匹配规则,以回车间隔。在Access-Control-Request-Headers中指定的每个Header,都必须在Allowed Header中有对应项。Header容易遗漏,没有特殊需求的情况下,建议设置为*,表示允许所有,大小写不敏感。
  • 暴露 Headers:暴露给浏览器的Header列表,即用户从应用程序中访问的响应头,例如一个Javascript的XMLHttpRequest对象。不允许使用通配符。具体的配置需要根据应用的需求确定,只暴露需要使用的Header。如果不需要暴露可以不填。大小写不敏感。该项是可选配置项。
  • 缓存时间(秒):浏览器对特定资源的预取请求(OPTIONS请求)返回结果的缓存时间,单位为秒。如果没有特殊情况可以稍大一点,比如60秒。该项是可选配置项。
  • 返回 Vary: Origin:如果实际场景中,同时存在CORS和非CORS请求,或者Origin头有多种可能值时,建议配置Vary: Origin以避免本地缓存问题。

相关文档

适用于

  • 对象存储OSS
首页 OSS跨域资源共享(CORS)出现报错的排查方法