Object Storage - Setting up CORS on Object Storage

By default, modern browsers enforce a same-origin security policy, i.e., preventing a resource loaded from one origin from interacting with another resource loaded from another origin.

Cross-Origin Resource Sharing (CORS) is a technique that allows resources from a client web application loaded from one domain to interact with resources in a different domain.

Use case scenarios

Usual use case scenarios for CORS in OVHcloud Object Storage would be the following:

• You host a static website in a container, and you want to use JavaScript to access resources hosted in the same container or another container.
• You have a frontend application (e.g., a mobile application) that needs to access resources hosted in an Object Storage container.

How does it work?

Under the hood, the client must first know if CORS is enabled on the server side. It sends a preflight request (OPTIONS request) to the OVHcloud Object Storage to check the rules for CORS:

• Which origins are accepted
• Which HTTP verbs
• Which headers
• etc.

Then, based on how the server responds, the CORS request is allowed or not:

• The request's Origin header must be defined in the AllowedOrigins element.
• The request method (GET, PUT, etc.) or the Access-Control-Request-Methods header (in case of a preflight OPTIONS request) must be one of the AllowedMethods elements.
• All the headers listed in the request's Access-Control-Request-Headers header on the preflight request must be defined in the AllowedHeaders element.

The rules for accepted CORS requests are configured at the container level.

Requirements

• A bucket on which you can configure the CORS rule
• Credentials and permissions on the containers/objects for the user making the requests

Instructions

Configuration

Using the AWS CLI, set up CORS on the container:

aws s3api put-bucket-cors --bucket <bucket_name> --cors-configuration file://cors.json

The cors.json file contains the following configuration:

{
   "CORSRules": [
        {
            "AllowedHeaders": ["header1", "header2", etc.],
            "AllowedMethods": ["GET", "HEAD", etc.],
            "AllowedOrigins": ["https://<origin-domain>", etc.],
            "ExposeHeaders": ["Access-Control-Allow-Origin"]
        }
   ]
}

Configuration example

Let's assume you have a frontend web application hosted on https://my-app.xyz that uses JavaScript (React, Angular, or any frontend framework) to query media files hosted in an Object Storage container (https://my-media.s3.us-east-va.io.cloud.ovh.us/).

Enable CORS on the my-media bucket:

aws s3api put-bucket-cors --bucket my-media --cors-configuration file://cors.json

The cors.json file contains the following configuration:

{
   "CORSRules": [
        {
            "AllowedHeaders": ["Authorization"],
            "AllowedMethods": ["GET", "HEAD"],
            "AllowedOrigins": ["https://my-app.xyz"],
            "ExposeHeaders": ["Access-Control-Allow-Origin"]
        }
   ]
}

What has been done here is to tell the client application that the targeted container allows CORS requests only if:

• The request contains the "Authorization" header.
• The request is limited to "GET" and "HEAD" requests.
• The request comes from the "my-app.xyz" domain.

The Object Storage server will expose the Access-Control-Allow-Origin header in its responses.

Go further

For more information and tutorials, please see our other Object Storage support guides or explore the guides for other OVHcloud products and services.

If you need training or technical assistance to implement our solutions, contact your sales representative or click on this link to get a quote and ask our Professional Services experts for a custom analysis of your project.

*S3 is a trademark filed by Amazon Technologies, Inc. OVHcloud's service is not sponsored by, endorsed by, or otherwise affiliated with Amazon Technologies, Inc.