How Do I Preview OBS Objects in My Web Browser?

Context

For security and compliance purposes, Huawei Cloud OBS prohibits the preview of objects in a bucket by using the default OBS domain name (a bucket domain name or static website domain name). When you use such a domain name to access objects (such as videos, images, and web pages) in a browser, no content will be displayed. Instead, the content is downloaded as an attachment.

The effective time and supported regions are as follows:

January 1, 2022: CN North-Beijing1, CN North-Beijing4, CN East-Shanghai1, CN East-Shanghai2, and CN South-Guangzhou

March 25, 2022: CN-Hong Kong, AP-Bangkok, AP-Singapore, AF-Johannesburg, LA-Mexico City1, LA-Mexico City2, LA-Sao Paulo1, AP-Jakarta, and LA-Santiago

Troubleshooting

Use a user-defined domain name to preview objects.

The following solutions are available:

Solution 1: Use a User-Defined Domain Name

Solution 2: Use a User-Defined Domain Name and CDN

Solution 3: Use Private Bucket Retrieval on CDN

If you have bound a user-defined domain name to a bucket and enabled CDN acceleration, but the objects are still directly downloaded without object preview, handle the problem by referring to With CDN Acceleration Enabled, Why Are the Objects in My OBS Bucket Directly Downloaded When I Access Them?

Solution 1: Use a User-Defined Domain Name

Solution advantages and restrictions

• The bucket policy must be public read, so that all objects in the bucket can be accessed by anonymous users.
• As required by the China's Ministry of Industry and Information Technology (MIIT), you must complete the Internet Content Provider (ICP) filing, if the bucket to which your user-defined domain name is bound is in any of the following regions:

  CN North-Beijing1, CN North-Beijing4, CN East-Shanghai1, CN East-Shanghai2, and CN South-Guangzhou

• Only HTTP requests are supported.

Procedure

1. Bind a user-defined domain name to the OBS bucket.

   For details, see Configuring a User-Defined Domain Name. During the configuration, add a CNAME record for the OBS bucket domain name.

2. Check whether objects can be previewed in a browser online.

   Share an object link formatted in http://User-defined domain name/Object access path with other users for them to preview the object.

   If the object still cannot be previewed, check whether the value of the object metadata ContentType is supported by the browser.

   For example, ContentType should be set to video/mp4 for an MP4 video or set to image/jpeg for a JPG image. For details about all supported ContentType values, see Object Metadata Content-Type.

   You can configure ContentType on OBS Console, or using APIs and SDKs.

Solution 2: Use a User-Defined Domain Name and CDN

Solution advantages and restrictions

• The bucket policy must be public read, so that all objects in the bucket can be accessed by anonymous users.
• As required by the China's Ministry of Industry and Information Technology (MIIT), you must complete the Internet Content Provider (ICP) filing, if the bucket to which your user-defined domain name is bound is in any of the following regions:

  CN North-Beijing1, CN North-Beijing4, CN East-Shanghai1, CN East-Shanghai2, and CN South-Guangzhou

• HTTPS requests are supported. To use HTTPS, you need to import a certificate to CDN. For details, see HTTPS Certificates.

Procedure

1. On the CDN console, add the prepared user-defined domain name as an acceleration domain name.

   For details, see Adding a Domain Name. Set Origin Server Address to Domain name and set Domain name to an OBS bucket domain name, with the HTTP port and HTTPS port set to 80 and 443 respectively. On the Advanced Settings tab, click Edit next to HTTP Header. Then, add response header Content-Disposition and set its value to inline.

2. Bind the user-defined domain name to the OBS bucket.

   For details, see Binding a User-Defined Domain Name. During the configuration, use the CNAME record set allocated by CDN.

3. Check whether objects can be previewed in a browser online.

   Share an object link formatted in http://User-defined domain name/Object access path with other users for them to preview the object.

   If the object still cannot be previewed, check whether the value of the object metadata ContentType is supported by the browser.

   For example, ContentType should be set to video/mp4 for an MP4 video or set to image/jpeg for a JPG image. For details about all supported ContentType values, see Object Metadata Content-Type.

   You can configure ContentType on OBS Console, or using APIs and SDKs.

4. (Optional) If the preview still fails, resolve the issue by referring to Method 1 under Solutions and try again.

Solution 3: Use Private Bucket Retrieval on CDN

Solution advantages and restrictions

• The bucket policy can be public read or private.
• You only need to configure an acceleration domain name on CDN. No user-defined domain name of OBS is required. As required by the China's Ministry of Industry and Information Technology (MIIT), the used acceleration domain name must complete the Internet Content Provider (ICP) filing, if your bucket is in any of the following regions:

  CN North-Beijing1, CN North-Beijing4, CN East-Shanghai1, CN East-Shanghai2, and CN South-Guangzhou

• HTTPS requests are supported. To use HTTPS, you need to import a certificate to CDN. For details, see HTTPS Certificates.

Procedure

1. On the CDN console, add the prepared user-defined domain name as an acceleration domain name.

   For details, see Adding a Domain Name. Set Origin Server Address to OBS bucket and select the corresponding bucket domain name.

2. Enable Private Bucket Retrieval.

   For details, see OBS Private Bucket Access.

3. Configure the CNAME record set on DNS.

   For details, see the CNAME record configuration in Binding a User-Defined Domain Name. Use the CNAME record set allocated by CDN.

4. Check whether objects can be previewed in a browser online.

   Share an object link formatted in http://User-defined domain name/Object access path with other users for them to preview the object.

   If the object still cannot be previewed, check whether the value of the object metadata ContentType is supported by the browser.

   For example, ContentType should be set to video/mp4 for an MP4 video or set to image/jpeg for a JPG image. For details about all supported ContentType values, see Object Metadata Content-Type.

   You can configure ContentType on OBS Console, or using APIs and SDKs.