How to Configure CORS on DigitalOcean Spaces

Spaces Object Storage is an S3-compatible object storage service that lets you store and serve large amounts of data. Each Space is a bucket for you to store and serve files. The built-in Spaces CDN minimizes page load times and improves performance.

Client web applications loaded in one domain can interact with resources in a Spaces bucket with Cross-Origin Resource Sharing (CORS) configured.

You can configure CORS via the control panel, which you can use from any web browser, or by uploading a configuration XML file to your bucket, which supports more configuration options.

Configure via the Control Panel

To configure CORS for a bucket via the control panel, navigate to its Settings page. In the CORS Configurations section, click Add.

This opens the Advanced CORS Options window, which lets you set the following advanced CORS options:

• Origin: Specifies the complete domain of the client you want to access your bucket’s resources. The domain should start with a protocol identifier, such as http, end with a hostname or hostname and port, and optionally include a wildcard character (*) at the start of the hostname. For example, https://*.example.com. All other settings are only applied to requests from this Origin.

• Allowed Methods: Determines which API methods can interact with your bucket. You can allow or prohibit the following methods:

  • GET: Downloads a resource.
  • PUT: Updates a resource’s properties or information.
  • DELETE: Deletes a resource.
  • POST: Creates a new resource.
  • HEAD: Retrieves a resource’s metadata, such as its file size.

• Allowed Headers: Determines which non-default headers are accepted in your bucket. To verify that an incoming HTTP request abides by your CORS settings, your bucket checks the request’s list of headers. Each header describes a property of the request. For example, Content-Length and Content-Type are some of the default headers that CORS automatically accepts. However, if your client sends any non-default headers, you must first add them in your CORS configuration.

• Access Control Max Age: Determines how long a request’s verification is cached, in seconds. While verification is cached, the bucket can accept more requests from the same origin without needing to be verified, which improves performance. The recommended value is 5 seconds. Lower values may be useful during development, and higher values may be useful if a single browser is issuing many requests at once. Some browsers may also limit this value to as high as 10 minutes.

Configure by Uploading XML Configuration File

In order to set certain configuration options not available in the control panel, such as ExposeHeaders, you can upload a CORS XML configuration file via s3cmd. You can set up s3cmd with our tutorial.

For example, the following XML file sets ExposeHeaders to ETag, alongside other configuration options:

    <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
        <CORSRule>
            <AllowedOrigin>*</AllowedOrigin>
            <AllowedMethod>POST</AllowedMethod>
            <AllowedMethod>PUT</AllowedMethod>
            <AllowedMethod>DELETE</AllowedMethod>
            <MaxAgeSeconds>3000</MaxAgeSeconds>
            <ExposeHeader>ETag</ExposeHeader>
            <AllowedHeader>*</AllowedHeader>
        </CORSRule>
    </CORSConfiguration>

You can then upload an XML configuration file to your bucket with the following s3cmd command:

s3cmd setcors /path/to/config.xml s3://BUCKET_NAME