The one-origin policy is a key security mechanism for isolating potentially malicious files. It restricts the way files/scripts loaded from one origin interacts with resources from another origin. Resources with the same protocol, domain name (or IP), and port are considered to belong to the same origin. Scripts on one origin only have permissions to read/write resources on the origin but cannot access resources on other origins.
Webpages from a single origin should have the same protocol, domain name, and port (if specified). The following table shows how to test whether a webpage belongs to the same origin as
||Yes||Same protocol, domain name, and port|
||Yes||Same protocol, domain name, and port|
||No||Different protocols (HTTPS)|
||No||Different ports (81)|
||No||Different domain names|
Cross-Origin Resource Sharing (CORS) is also known as cross-origin access. It allows web application servers to perform cross-origin access control to ensure secure cross-origin data transfer. Both the browser and server need to support this feature before you can use it. The feature is compatible with all browsers (for IE, IE 10 or later is required).
The CORS communication process is automatically completed by the browser without any manual intervention required. For developers, CORS communication and one-origin AJAX communication work in the same way and use the same code. Once the browser identifies an AJAX request for cross-origin access, it automatically adds additional header information. In some cases, an additional request is made, but you will not perceive it.
Therefore, the key to CORS communication lies in the server. As long as the server implements CORS APIs, cross-origin communication can be implemented.
CORS is used when you are using a browser. This is because access permissions are controlled by the browser but not the server. Therefore, if you use other clients, you don't need to care about cross-origin access.
With CORS, you can use AJAX in a browser to directly access, upload, and download COS data without using your app server for data transfer. If your website adopts both COS and AJAX technologies, we recommend you use CORS for direct communication with COS.
COS supports configuring CORS rules to allow or deny cross-origin requests as needed. CORS rules are configured at the bucket level.
COS authentication and whether a CORS request is allowed are independent of each other. In other words, CORS rules of COS are only used to decide whether to add CORS-related headers. It is up to the browser whether to block the request.
All object and multipart APIs of COS support CORS authentication.
When two webpages (
www.b.com) running in the same browser request the same cross-origin resource at the same time, if the request from
www.a.comarrives at the server first, the server will return the resource to the user of
www.b.comsends a request later, the browser will return the cached response of the last request to the user. In this case, the header content does not match the CORS-required content, so the
www.b.comrequest will fail.
The following example shows how to configure CORS to get data from COS by using AJAX. The bucket permission used in the example is set to public. For a bucket with private access permission, a signature needs to be added in the request, while other configurations are the same.
The bucket used in the following example is named
corstest, with the access permission of public read/private write.
corstest. The access address of this file is
If "test" (the file content) is returned, the file can be accessed normally.
Access the file by using AJAX
You can access the
text.txt file directly by using AJAX.
(1) Copy the following code to a local HTML file and then open it with a browser. As no custom header is set, no preflight request is required.
(2) Open the HTML file in the browser and click Test CORS to send the request. The following error occurs with the message "Access denied. No Access-Control-Allow-Origin header is found". This is because CORS has not been configured on the server.
(3) When the access fails, go to the Headers page to find out the cause. You can see that the browser sent a request with Origin specified, meaning it is a cross-origin request.
The webpage is set up on the server with the address
http://127.0.0.1:8081. Therefore, the Origin is
Now that you have identified the cause of the access failure, you can solve the problem by configuring CORS for the bucket. This example configures CORS in the COS console as follows, which is recommended for easy configurations:
The CORS configuration consists of multiple rules, which are matched individually from top to bottom. The first matched rule will be applied.
After the configuration is completed, try accessing the
test.txt file again. If the result is as follows, the file can be accessed normally.
To avoid problems related to cross-origin access, you can set the least restricted CORS rule as described above to allow all cross-origin requests. If an error still occurs under this configuration, the root cause may lie in other factors rather than CORS.
In addition to configuring the least restricted rule, you can also configure a more refined rule. For example, in this example, you can use the following most restricted configuration to ensure a successful match:
Therefore, for most scenarios, we recommend you use the most restricted configuration as needed to ensure security.
CORS configuration items are as follows:
This refers to the origin allowing cross-origin requests.
http://*.abc.comare supported. Note that each line can contain only one
Enumerate one or multiple allowed cross-origin request methods.
Examples: GET, PUT, POST, DELETE, and HEAD.
Allowed cross-origin request header.
*, meaning that all headers are allowed.
Access-Control-Request-Headersmust correspond to a value in
ETagis recommended by default.
This is the time (in seconds) the browser can cache the results of a preflight request (OPTIONS request) for specific resources. In general cases, you can set it to a bigger value, for example, 60 seconds. This configuration item is optional.