Cross-origin resource sharing (CORS) is a standard cross-origin solution provided by HTML5 to allow web application servers to control cross-origin access. This way, the security of data transmission across origins is ensured.

Background information

Browsers check cross-origin requests based on the same-origin policy to keep the website content secure. When a request is sent from Website A by using JavaScript to access Website B of another origin, the browser rejects the request. In this case, you can configure CORS rules to allow cross-origin requests.

Origins that use the same protocol, domain name or IP address, and port number are considered the same origin. The following table describes examples and checks whether the examples are from the same origin as http://www.aliyun.com/org/test.html.
URL Access result Cause
http://www.aliyun.com/org/other.html Successful Same protocol, domain name, and port number
http://www.aliyun.com/org/internal/page.html Successful Same protocol, domain name, and port
https://www.aliyun.com/page.html Failed Different protocols (HTTP and HTTPS)
http://www.aliyun.com:22/dir/page.html Failed Different port numbers (22 and 80)
http://www.alibabacloud.com/help/other.html Failed Different domain names

The preceding table shows that the browser denies requests whose protocols, domain names, or port numbers are different from those of the accessed origin. If you want to allow access from the origins, you must configure CORS rules.

CORS rules

OSS allows you to configure CORS rules to allow or deny cross-origin requests based on your requirements. CORS rules are configured only to decide whether to add CORS-related headers to requests. The browser decides whether to reject cross-origin requests. For more information, see PutBucketCORS.

You must set the Vary: Origin header to true in the following scenarios to avoid the issue that resources cannot be accessed due to different values of the Origin headers in the request and the local cache.
Notice If you set the Vary: Origin header to true, access by using the browser or Content Delivery Network (CDN) back-to-origin requests may increase.
  • CORS and non-CORS requests are sent at the same time

    For example, in the following code, a non-CORS request is created in the <img> field and a CORS request is created by using the fetch method:

    <!doctype html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>CORS Test</title>
    </head>
    <body>
    // Create a non-CORS request. 
    <img class="img-responsive"src="https://examplebucket.oss-cn-beijing.aliyuncs.com/exampleobject.txt" alt="">
    <script>
      // Create a CORS request. 
      fetch("https://examplebucket.oss-cn-beijing.aliyuncs.com/exampleobject.txt").then(console.log)
    </script>
    </body>
    </html>
  • The Origin header has multiple possible values

    For example, you can set the Origin header to http://www.example.com and https://www.example.org to allow CORS requests from these origins.

Implementation methods

Implementation method Description
Console A user-friendly and intuitive web application
Java SDK SDK demos for various programming languages
Python SDK
PHP SDK
Go SDK
C SDK
.NET SDK

FAQ

  • What do I do if CORS errors occur when I use an accelerated domain name to access OSS?

    If a CORS error occurs when you use an accelerated domain name to access OSS, you must configure CORS rules in the CDN console. For more information, visit Configure CORS for Alibaba Cloud CDN.

  • What do I do if the 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'. error occurs when I send a cross-origin request?

    We recommend that you set xhr.withCredentials to false to resolve this error.