Object Storage - Setting up CORS on Object Storage

Objective

By default, modern browsers impose a same-origin security policy i.e. by preventing a resource loaded from one origin to interact with another resource loaded from another origin.

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

This guide explains CORS and how to enable it on your Object Storage buckets.

Use case scenarios

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

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

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 what 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 bucket level.

Requirements

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

Instructions

Configuration

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

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 bucket (https://my-media.s3.gra.io.cloud.ovh.net/).

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"]
        }
   ]
}

Basically, what has been done here is to tell the client application that the targeted bucket 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 training or technical assistance implementing our solutions, contact your sales representative or visit our Professional Services page to request a quote and have your project analysed by our experts.

Join our community of users.