Skip to main content
This guide explains what a CORS policy is and how to configure it correctly in AWS, GCP, and Azure. Completing this step ensures that your data assets will render correctly within the Labelbox application.

​
What is CORS and why is it necessary?

  • The Problem: Modern web browsers enforce a “Same-Origin Policy” to protect you from malicious websites. This policy prevents a web page (like the Labelbox app at https://app.labelbox.com) from making requests to a different domain (like your storage bucket at your-bucket.s3.amazonaws.com).
  • The Solution: A CORS policy is a small configuration file you add to your storage bucket. It acts as a permission slip, telling the browser, “It’s okay to allow requests from https://app.labelbox.com to access files in this bucket.”
When configuring CORS for your cloud storage bucket, you will need to include both of these Labelbox origins: https://app.labelbox.com and https://editor.labelbox.com.

​
AWS S3

  1. Navigate to your S3 bucket in the AWS Console.
  2. Click the bucket name.
  3. Go to the Permissions tab.
  4. Scroll to the Cross-origin resource sharing (CORS) section, click Edit.
  5. Paste the provided policy into the editor and save.
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "https://app.labelbox.com",
            "https://editor.labelbox.com"
        ],
        "ExposeHeaders": []
    }
]
  1. For more details on setting up CORS for your AWS S3 bucket, see these AWS docs.

​
Google Cloud Storage (GCS)

The configuration must allow requests from both https://app.labelbox.com and https://editor.labelbox.com to ensure data loads correctly across the entire platform. You can set this policy using one of the two methods below.

​
Option 1: Using the gcloud CLI on your local machine

This method is ideal if you have the gcloud command-line tool installed on your computer.
  1. Create a new file on your computer named cors-config.json.
  2. Copy and paste the following JSON content into the file. Note: The "*" for responseHeader allows all necessary headers and is recommended for robust compatibility. 
    [ { "origin": ["https://app.labelbox.com", "https://editor.labelbox.com"], "method": ["GET"], "responseHeader": ["*"], "maxAgeSeconds": 3600 } ]
  3. Open your terminal or command prompt and run the following command. Be sure to replace [BUCKET_NAME] with the actual name of your GCS bucket. 
    gcloud storage buckets update gs://[BUCKET_NAME] --cors-file=cors-config.json

​
Option 2: Using the Google Cloud Shell

This method is convenient if you prefer to work directly within the Google Cloud Console without creating local files.
  1. Open the Google Cloud Shell from your GCP console.
  2. Run the following command in the Cloud Shell terminal. This command creates the cors-config.json file and writes the correct configuration to it in a single step. 
    echo '[{"origin": ["https://app.labelbox.com", "https://editor.labelbox.com"], "method": ["GET"], "responseHeader": ["*"], "maxAgeSeconds": 3600}]' > cors-config.json
  3. Next, run the command below to apply the configuration to your bucket. Remember to replace [BUCKET_NAME] with your bucket’s name. 
    gcloud storage buckets update gs://[BUCKET_NAME] --cors-file=cors-config.json

​
Microsoft Azure

  1. Navigate to the your Storage Account in your Azure Portal.
  2. Under Settings, find Resource sharing (CORS).
  3. Select the Blob Service tab.
  4. Fill in the fields: Allowed origins (https'//app.labelbox.com and https://editor.labelbox.com). Allowed methods (GET), etc. and save.

​
Troubleshooting

Error messageTroubleshooting
Unable to detect proper CORS configurationEnsure your cloud storage bucket has CORS configured with the following origins: https://app.labelbox.com and https://editor.labelbox.com. For more troubleshooting help, see: - AWS troubleshooting CORS - GCS troubleshooting CORS requests - Cross-Origin Resource Sharing (CORS) support for Azure Storage