CORS & Unity WebGL

What is CORS?

“Cross-Origin Resource Sharing (CORS) is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served.” – Wikipedia

CORS is a security feature designed to protect data stored on a server from requests made specifically by web browsers — meaning it’s a browser-level protection, not a general one.

CORS blocks any request coming from a domain that isn’t explicitly listed as “Access-Control-Allow-Origin” on the storage server.

Files hosted online remain accessible when accessed directly via their URL in a browser, because in that case, the browser is making the request directly — not through another hosted site. This is what causes confusion for many WebGL developers.

How to Access Protected Data

Since CORS is a server-side security mechanism, it’s quite restrictive and offers few options.

The first option is to use a proxy, which fetches the file on your behalf and then allows your web page (or WebGL app) to make the request through it. There are several free and public proxies available online, such as filestack.com, corsproxy.io, etc.
However, this makes you dependent on a third-party service outside your control.

The second option is to modify the CORS configuration directly on your storage server (in our case, Google Cloud Storage).
Here’s the solution recommended by Google themselves:

CORS Configuration

To upload or access data directly from a browser, you need to configure your Cloud Storage bucket for cross-origin access (CORS).
You can do this using the gsutil command-line tool, which you can install here.

If you don’t want any domain-based restrictions (the most common scenario), copy this JSON into a file named cors.json:

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

Then run gsutil cors set cors.json gs://<your-cloud-storage-bucket> to apply these settings.