App XMLHttpRequest blocked by CORS policy: No 'Access-Control-Allow-Origin'

[espruino-discuss]

Posted at 2021-11-28 by Michaelnik

I built Tides app which gets JSON data from tidesandcurrents.noaa.gov in custom.html (like openstmap does).

When I test it from github.io I get CORS policy error.

Is that something I have to work around or it would work fine on https://banglejs.com/ ?

Access to XMLHttpRequest at 'https://tidesandcurrents.noaa.gov/api/datagetter?product=predictions&application=NOS.COOPS.TAC.WL&range=720&datum=MLLW&station=8531680&time_zone=lst_ldt&units=english&interval=hilo&format=json' from origin 'https://pasniak.github.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

App is at:
https://pasniak.github.io/BangleApps/#outdoors

[espruino-discuss]

Posted at 2021-11-29 by Ken

Sounds like you need a CORS proxy. If you don't already have a server to play with, I would recommend signing up for a free Cloudflare account and then setting up a worker with the attached code. I took one of their samples and simplified it a bit and I think you get 100,000 requests a day for free.

The attached code is running under a worker I just setup so that you can test to see if it solves your issue. Just remember to URL encode your NOAA API url before you paste it into the url query string param.

EXAMPLE

https://production.jolly-queen-9814.kensapps.workers.dev/?url=YOUR-URL-HERE

---

Attachments:

• cloudflare-proxy.js