Trying to parse NPR json feed in JavaScript

Hi. I’d like to display headlines on our internal digital signage from a JSON feed like this one: https://feeds.npr.org/feeds/1013/feed.json However, when I try to fetch it via JavaScript I get a “Cross-Origin Request Blocked” error.

I’m just using a basic thing from MDN tuts:
`async function populate() {
const requestURL = “https://feeds.npr.org/feeds/1013/feed.json”;
const request = new Request(requestURL);

const response = await fetch(request);
console.log(response);

}
populate();`

Do I need NPR One API access to do this or do something differently? I don’t have access to NPR’s servers. Thanks for any help on this!

If you are getting a CORS error, then you will need to see what additional APIs NPR provides that you can access that don’t have that restriction. Can you link to the MDN example? I can see what is going on there.

If you are trying to learn how to use fetch and are just using NPR as an example, then you can try the example from the following tutorial to get your feet wet: Making HTTP/Web Requests in JavaScript

My first post in years and I get help from the man himself :smiley:
On MDN I’m fiddling with this first function example here.

But that’s not where I’m getting the NPR request URL. That’s something I found looking at source on their web page. <link rel="alternate" type="application/json" title="Education" href="https://feeds.npr.org/feeds/1013/feed.json" />

…But I’m getting the sense that this-is-not-what-that-is-for. I would much prefer that I could just use that URL, instead of going though the API access process and having to code server-side to hide a key.

I do want to look at your tutorial though, thanks for that!

Haha! I still enjoy all of this way too much :stuck_out_tongue:

CORS kicks in only when making an API request such as what you are trying to do in JavaScript. There are many situations that CORS doesn’t apply, such as when it is being loaded via a link tag as shown here. Another common example is loading images via the img tag or via CSS where it all works fine, but if you try to load the image via JavaScript, you may see a CORS issue where the domain you are loading the image from doesn’t allow your domain access.

:slight_smile: