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

Posted on Sun 28th, November 2021

• #1

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
• #2

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
```
1 Attachment
- cloudflare-proxy.js

Post a reply
- Bold
- Italics
- Link
- Image
- List
- Quote
- code
- Preview
Formatting Help

Don't worry about formatting, just type in the text and we'll take care of making sense of it. We will auto-convert links, and if you put asterisks around words we will make them bold.

Tips:

Create headers by underlining text with ==== or ----

To *italicise* text put one asterisk each side of the word

To **bold** text put two asterisks each side of the word

Embed images by entering:
![](https://www.google.co.uk/images/srpr/logo4w.png)
That's the hard one: exclamation, square brackets and then the URL to the image in brackets.

* Create lists by starting lines with asterisks

1. Create numbered lists by starting lines with a number and a dot

> Quote text by starting lines with >

Mention another user by @username

For syntax highlighting, surround the code block with three backticks:

```
Your code goes here
```
Just like Github, a blank line must precede a code block.

If you upload more than 5 files we will display all attachments as thumbnails.

For a full reference visit the Markdown syntax.

Post a reply

About

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

Posted by Avatar for Michaelnik @Michaelnik

Actions