All Products
Search
Document Center

How to troubleshoot CORS errors?

Edit in GitHub
Last Updated: Oct 23, 2019 Edit in GitHub

Overview

This topic describes how to configure Cross Origin Resource Sharing (CORS) and troubleshoot CORS errors.

 

Description

Configuration items

A CORS rule applies only to requests that meet the conditions in the rule. The configuration of each rule must be unique. Other options only allow the required permissions. CORS configuration items are as follows:

  • Sources: Specify the origins from which a request is allowed. You can specify multiple origins. Enter the complete domain name. Examples: http://10.X.X.100:8001 and https://www.aliyun.com. Note that protocol name HTTP or HTTPS must be included in the domain name. Include the port in the domain name if the port is not default port 80. To view information of the domain name, you can use the debugging function of the browser to view the origin in the header. Only one asterisk (*) can be used in the domain name as a wildcard. Example: https://*.aliyun.com. If Sources is set to *, all cross-origin requests are allowed.
  • Allowed Methods: Select methods based on the request requirements. You can select all methods when you perform debugging.
  • Allowed Headers: Specify allowed headers in a cross-origin request. Separate multiple headers with carriage returns. Each header specified by Access-Control-Request-Headers must match a value in Allowed Headers. If there are no special header requirements, we recommend that you set Allowed Headers to asterisk (*) to allow all requests. Allowed headers are case-insensitive.
  • Exposed Headers: Optional. Specify the list of headers that can be exposed to the browser. The headers are the response headers that allow access from an application, such as XMLHttpRequest in JavaScript. No wildcards are allowed. The specific configuration depends on the demands of the application to expose only headers you want to use. If you do not want to expose headers, you can leave this field empty. Exposed headers are case-insensitive.
  • Cache Timeout (Seconds): Optional. Specify the time in seconds the browser can cache the response to a preflight (OPTIONS) request to a specific resource. We recommend that you set this parameter to a greater value such as 60s.

 

Troubleshooting

Errors

CORS configuration errors are reported as follows:

  • The browser reports the following error:
    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.

  • OSS reports the following error:
    <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>
  • For more information about other errors, see OSS 403.

Note:

  • CORS errors occur when you use OSS in websites and CORS configurations are not proper. You can view the request details from the browser. If you are using Google Chrome, press F12 to access Developer tools. On the Network tab, you can view information of corresponding elements.
  • Errors returned from OSS can be obtained by capturing packets. For example, you can use Wireshark and specify host ([$Bucket_Name].oss-cn-beijing.aliyuncs.com) as the filter to capture packets.
  • Errors returned from OSS can also be obtained through CORS debugging program oss-h5-upload-js-direct.

 

Troubleshooting

Possible CORS errors are as follows.

  • Sources configuration errors
  • Allowed Methods configuration errors
  • Allowed Headers configuration errors
  • Exposed Header configuration errors

 

Debugging methods

In the OSS console, select a bucket. Click Basic Settings. In the Cross-Origin Resource Sharing (CORS) section, click Configure. Configure the following parameters:

  • Set Sources to asterisk (*). Confirm that this parameter is properly configured. If an object is successfully uploaded after you set this parameter to asterisk (*), Sources is not properly configured. Check this configuration based on rules.
  • Select all options for Allowed Methods: GET, PUT, DELETE, POST, and HEAD. Confirm that this parameter is properly configured.
  • Set Allowed Headers to asterisk (*). Confirm that this parameter is properly configured.
  • Set Exposed Headers to specified values or leave this parameter unspecified. Confirm that this parameter is properly configured.

 

References

For more information about the description and configuration of CORS, see Set CORS rules.

 

Application scope

  • OSS