跨域资源共享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;
来解决此问题。