Stuck at CORS header ‘Access-Control-Allow-Origin’ missing when using Cloudflare Workers to access resources at R2 storage

I am setting up a Cloudflare Worker to fetch pmtiles from an R2 bucket. I followed Protomap’s instructions. And ran curl -v https://pmtiles.hesham.studio/cairo/0/0/0.mvt and this is the relevant output:

< HTTP/2 200 
< date: Fri, 02 Feb 2024 12:45:50 GMT
< content-type: application/x-protobuf
< content-length: 7793
< cf-ray: 84f288941b181896-MRS
< cf-cache-status: HIT
< accept-ranges: bytes
< access-control-allow-origin: https://devmap.hesham.studio
< age: 78734
< cache-control: max-age=86400
< last-modified: Thu, 01 Feb 2024 14:53:36 GMT
< vary: Origin
< report-to: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v3?s=lHHzn5IkEhIu3L2KbT5c5a%2BG2JJPPkwfb0fjymvDDBwglZYqW%2BI4SsUxNv%2FFGs5Fn590PZrspx%2Be9O4hkoI7gXKoefAxlMcXYOA1OklITlUNAMjjyD1E71LP87%2B%2FrJG6a6Dmf87XGJw%3D"}],"group":"cf-nel","max_age":604800}
< nel: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
< server: cloudflare
< alt-svc: h3=":443"; ma=86400

From what I can tell it seems to work, if I access https://pmtiles.hesham.studio/cairo/0/0/0.mvt from a browser it downloads the relevant file.

Now when I setup the website and initiate Maplibre and pass in https://pmtiles.hesham.studio/cairo/0/0/0.mvt to style.json as the tile source, and try to access the map on https://devmap.hesham.studio
I get missing cors error:
enter image description here

After searching for how to set this header and found out how. I looked into the worker’s code and found that it does get set.

At this point I’m really stumped at troubleshooting this. Why does the header get reset? I should mention that devmap.hesham.studio is proxied through Cloudlfare to point to map-ev9.pages.dev.

resolved