Can't develop locally with a valid Protomaps API key

[jaanli]

This is such a cool example and I'm excited to modify https://jaanli.github.io/american-community-survey/new-york-area/income-by-race to include this!

I cloned this repo:

git clone https://github.com/bdon/observable-framework-maps.git

And then changed the key in https://github.com/bdon/observable-framework-maps/blob/main/docs/example-map.md to my API key (7c0c24912bd59a0f) from the protomaps.com dashboard (https://protomaps.com/dashboard).

However, I still get this error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.protomaps.com/styles/v2/black.json?key=7c0c24912bd59a0f. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

My understanding from Protomaps documentation (https://protomaps.com/other) is that "Requests made from localhost with a valid API key are not subject to CORS restrictions" so I am not sure how to debug this.

Might be missing something basic! :) 🙏

[bdon]

in the dashboard, can you try adding your localhost with port to the CORS origins such as http://localhost:3000 ?

[jaanli]

Yay! That worked, thank you @bdon ! I wasn't sure how to do that after some Googling, so I used this extension called "CORS Unblock" and it seems to have worked:

https://chromewebstore.google.com/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino

Perhaps the documentation could be edited at https://protomaps.com/other to clarify how to do this for local development?

Now the demo works with local development; will move onto adding Census data here :) super exciting!! Thanks again 🙏

[bdon]

Please do not use this extension workaround, it makes your browsing less secure across all websites.

for now can you try to add http://127.0.0.1:3000 to your allowed CORS origins on protomaps.com/dashboard ?

[jaanli]

Thanks so much @bdon ! I've been using the extension workaround as I don't think the dashboard is working (or I'm likely not using it correctly yet...)

Screenshot of https://protomaps.com/keys_edit -

When I run yarn dev for the development server I still can't see a local version of the Protomaps tiles unfortunately.

Any other ideas to help debug?

So far I've been pushing ~100MB (GitHub file limit) PMTiles files to GitHub Pages then going to https://jaanli.github.io/new-york-real-estate to help debug, but that takes a bit of time due to slow upload..

[bdon]

It needs to be http://127.0.0.1:3000 and not just http://127.0.0.1. Without a port, http://127.0.0.1 is shorthand for http://127.0.0.1:80 and :443 for HTTPS. Browsers treat different ports as totally separate origins.

Let me know if updating your dashboard fixes it