跨域资源共享CORS（Cross-Origin Resource Sharing）简称跨域访问，是HTML5提供的标准跨域解决方案，允许Web应用服务器进行跨域访问控制，确保跨域数据传输的安全性。

背景信息

跨域访问是浏览器出于安全考虑而设置的一个限制，即同源策略，是用于隔离潜在恶意文件的关键安全机制。当A、B两个网站属于不同域时，来自于A网站页面中的JavaScript代码访问B网站时，浏览器会拒绝该访问。

同协议、同域名（或IP）、以及同端口视为同域。两个页面的协议、域名和端口（若指定了端口）相同，则视为同源。下表给出了相对 http://www.aliyun.com/org/test.html的同源检测示例：
URL 访问是否成功 原因
http://www.aliyun.com/org/other.html 是 协议、域名、端口相同
http://www.aliyun.com/org/internal/page.html 是 协议、域名、端口相同
#page.html 否 协议不同（HTTPS）
http://www.aliyun.com:22/dir/page.html 否 端口不同（22）
http://help.aliyun.com/dir/other.html 否 域名不同

从上表中可以看出，协议、域名或者端口不同的情况下，浏览器会拒绝该来源的访问。如果要允许这些来源的访问，需要设置跨域资源共享规则。

CORS规则

OSS支持根据需求灵活配置CORS规则，实现允许或者拒绝相应的跨域请求。CORS规则仅用来决定是否附加CORS相关的Header，是否拦截跨域请求由浏览器决定。详情请参见PutBucketCORS。

以下两种情况下需选中 返回Vary: Origin头以避免本地缓存错乱。
注意 选中 返回Vary: Origin头后，可能会造成浏览器访问次数或者CDN回源次数增加。
  • 同时存在CORS和非CORS请求

    例如实际请求中在<img>标签下发起非CORS请求，在fetch下发起CORS请求。

    <!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CORS Test</title>
</head>
<body>
//非CORS请求。
<img src="https://examplebucket.oss-cn-beijing.aliyuncs.com/exampleobject.txt" alt="">
<script>
  //CORS请求。
  fetch("https://examplebucket.oss-cn-beijing.aliyuncs.com/exampleobject.txt").then(console.log)
</script>
</body>
</html>
  • Origin头存在多种可能值

    例如实际应用中指定允许的跨域请求来源Origin头为http://www.example.com以及https://www.example.org。

操作方式

操作方式 说明
控制台 Web应用程序，直观易用
命令行工具ossutil 命令行工具，性能好
Java SDK 丰富、完整的各类语言SDK demo
Python SDK
PHP SDK
Go SDK
C SDK
.NET SDK

常见问题

  • CORS配置项常见错误

    有关CORS配置项常见错误及排查方法，请参见OSS跨域资源共享（CORS）错误排除。

  • 报“No 'Access-Control-Allow-Origin'”错误

    有关出现该错误的原因及解决方案，请参见OSS设置CORS规则以后报No 'Access-Control-Allow-Origin'错误的解决方法。

  • 使用CDN域名访问OSS遇到跨域问题

    如果您使用CDN域名访问OSS遇到跨域问题，需在CDN控制台配置跨域规则。详情请参见CDN如何配置跨域资源共享（CORS）。

  • 发送跨域请求时报Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.错误

    建议您通过设置xhr.withCredentials = false;来解决此问题。