How do I fix a cross-origin request error indicating that Access-Control-Allow-Origin cannot be an asterisk (*)?

Problem description

Access-Control-Allow-Origin is set to an asterisk (*) in a cross-origin resource sharing (CORS) rule for an Object Storage Service (OSS) bucket and Access-Control-Allow-Credentials is set to true in front-end code. The following error is returned for a cross-origin request for an object in the bucket:

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'.

Causes

If your browser security policy requires Access-Control-Allow-Credentials to be set to true, Access-Control-Allow-Origin cannot be set to an asterisk (*). This prevents access to a domain from all other domains and leaks of credentials such as cookies, Authorization header information, and other sensitive information.

Solutions

• If you want cross-origin requests to include credentials, change the Access-Control-Allow-Origin settings from * to specific origin URLs, such as https://example.com. For more information, see CORS.

• If you do not want cross-origin requests to include credentials, set Access-Control-Allow-Credentials to false in your code. Sample code:

  xhr.withCredentials = false