Range request gets CORS error in Google Chrome with Google Cloud Storage

Question

I am getting an error that I cannot find a fix for. I am sending a fetch of a CORS resource from Google Cloud Storage, but when I send WITHOUT the range request, it works. But if I add the range request, it fails. What can go wrong?

fetch("https://storage.googleapis.com/bucket/abc.pdf", {
  "headers": {
    "range": "bytes=24772608-24832146"
  },
  "referrer": "http://localhost:8000/",
  "referrerPolicy": "strict-origin-when-cross-origin",
  "body": null,
  "method": "GET",
  "mode": "cors",
  "credentials": "omit"
});

Notice the range in the headers that is causing the issue.

Here is my Google Storage CORS configuration:

[{"origin": ["*"],"responseHeader": ["Content-Type", "Accept-Ranges", "Content-Range", "Content-Encoding", "Content-Length","Access-Control-Allow-Origin"],"method": ["GET", "HEAD", "OPTIONS"],"maxAgeSeconds": 3600}]

Google Cloud Storage supports range requests but its not clear how to configure it.

Answer 1

Turns out I am missing the Range in the CORS JSON. Such a trivial issue, wished Google has given better documentation.

[{"origin": ["*"],"responseHeader": ["Content-Type", "Accept-Ranges", "Content-Range", "Content-Encoding", "Content-Length","Access-Control-Allow-Origin","Access-Control-Allow-Methods","Range"],"method": ["GET", "HEAD", "OPTIONS"],"maxAgeSeconds": 3600}]