Setting up CORS

When loading remote data into Foxglove Studio for playback and analysis, we recommend hosting your files in a cloud provider like Amazon Simple Storage Service (S3), Google Cloud Storage (GCS), or Azure Storage. You can also host files on your own server, but it may be difficult and time-consuming to set up support for Cross-Origin Resource Sharing (CORS) and range requests.

If your data is sensitive, generate and use a signed URL – make sure that you point to the resource directly, as redirects will not work with CORS:

• For S3 – Sharing objects using presigned URLs
• For GCS – Signed URLS
• For Azure Storage – Grant limited access to Azure Storage resources using shared access signatures (SAS)

This signed URL will work for a limited period of time, and you can set up your server to only sign URLs for authenticated users.

Finally, set up your CORS configuration. Check out the following example of a Terraform config for an S3 bucket (documentation here):

cors_rule {
  allowed_methods = ["GET", "HEAD", "OPTIONS"]
  allowed_origins = ["https://studio.foxglove.dev"]
  allowed_headers = ["*"]
  expose_headers = ["ETag", "Content-Type", "Accept-Ranges", "Content-Length"]
}

And a Terraform config for a GCS bucket (documentation here):

cors {
  origin = ["https://studio.foxglove.dev"]
  method = ["GET", "HEAD", "OPTIONS"]
  response_header = ["ETag", "Content-Type", "Accept-Ranges", "Content-Length"]
}