1. Articles
  2. Public Cloud Services
  3. Object Storage
  4. Tutorials

Articles in this section

How to Set Up CORS on S3 Object Storage

Avatar
Stephanie Richards
  • Updated
Follow

Learn about the concept of CORS and how to enable it on your S3 containers.

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.

s3CORS01.png

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.

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 a S3 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 container 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 my-bucket --cors-configuration 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 we 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 a S3 container (https://my-media.s3.us-east-va.io.cloud.ovh.us/).

We enable CORS on the my-media container:

aws s3api put-bucket-cors --bucket my-media --cors-configuration 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.

Related articles