Free news API without an API key

Why news APIs break in the browser

News API services and news feeds fail in a browser for different reasons. NewsAPI.org's free Developer plan allows 100 requests per day, delays articles by 24 hours and enables CORS for localhost only, so an app that works on your machine breaks once it is deployed; paid plans start at $449 per month. Keyed services also put the key in your page, where anyone can copy it.

Publisher RSS feeds need no key and update throughout the day; the BBC feeds set a ttl of 15 minutes. Most of them send no CORS header, so the browser hides the response from your script. Through cors.dev the request runs on a server and the feed comes back with Access-Control-Allow-Origin set to your origin.

Merge several feeds into one headline list

This fetches three feeds in parallel, keeps whatever loads if one fails, and sorts the items by date. It reads title, link, pubDate and the Media RSS thumbnail that many of these feeds include.

// Markup: <ul id="headlines"></ul>
const feeds = {
  BBC: 'https://feeds.bbci.co.uk/news/world/rss.xml',
  'Al Jazeera': 'https://www.aljazeera.com/xml/rss/all.xml',
  'The Guardian': 'https://www.theguardian.com/world/rss',
};
const MEDIA = 'http://search.yahoo.com/mrss/';

async function readFeed(source, url) {
  const response = await fetch('https://proxy.cors.dev/' + url, { credentials: 'omit' });
  if (!response.ok) {
    throw new Error(`${source}: ${response.headers.get('X-Cors-Error') ?? response.status}`);
  }

  const xml = new DOMParser().parseFromString(await response.text(), 'application/xml');
  if (xml.querySelector('parsererror')) throw new Error(`${source}: not valid XML`);

  return [...xml.querySelectorAll('item')].map((item) => {
    const media =
      item.getElementsByTagNameNS(MEDIA, 'thumbnail')[0] ?? item.getElementsByTagNameNS(MEDIA, 'content')[0];
    return {
      source,
      title: item.querySelector('title')?.textContent.trim() ?? '',
      link: item.querySelector('link')?.textContent.trim() ?? '',
      date: new Date(item.querySelector('pubDate')?.textContent ?? 0),
      image: media?.getAttribute('url') ?? null,
    };
  });
}

async function headlines(limit = 20) {
  const results = await Promise.allSettled(Object.entries(feeds).map(([source, url]) => readFeed(source, url)));
  for (const result of results) {
    if (result.status === 'rejected') console.warn(result.reason);
  }
  return results
    .flatMap((result) => (result.status === 'fulfilled' ? result.value : []))
    .sort((a, b) => b.date - a.date)
    .slice(0, limit);
}

const list = document.querySelector('#headlines');
headlines().then((items) => {
  list.replaceChildren(
    ...items.map((item) => {
      const entry = document.createElement('li');
      const link = document.createElement('a');
      if (/^https?:/.test(item.link)) link.href = item.link;
      link.textContent = item.title;
      const time = item.date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
      entry.append(link, ` (${item.source}, ${time})`);
      return entry;
    }),
  );
});

Write text with textContent and only accept http and https links, since feed content comes from a third party. For Atom feeds, more fields and safe rendering in detail, see fetch an RSS feed in JavaScript.

News feeds that work from the browser

Each feed was fetched through https://proxy.cors.dev/ with an Origin header. Item counts and sizes change through the day. Proxy needed means the publisher sends no CORS header your origin can use.

NPR and TechCrunch do send a CORS header, but only for their own sites, so your page still needs the proxy. The New York Times, DW and Fox News send Access-Control-Allow-Origin: *; call those directly. To check a feed that is not listed:

# No output: the feed sends no CORS header, so your page needs the proxy
curl -s -o /dev/null -D - -H 'Origin: https://example.com' \
  https://feeds.bbci.co.uk/news/rss.xml | grep -i access-control-allow-origin

# access-control-allow-origin: * means fetch() works without a proxy
curl -s -o /dev/null -D - -H 'Origin: https://example.com' \
  https://rss.nytimes.com/services/xml/rss/nyt/HomePage.xml | grep -i access-control-allow-origin

Feeds that do not work through the proxy

• Google News RSS: Google answers the proxy with 503 and its automated queries error page, so news.google.com feeds do not work through cors.dev.
• CNN: the rss.cnn.com feeds are served over plain HTTP and fail over HTTPS, and cors.dev only fetches HTTPS targets.
• Yahoo News and France 24: Yahoo answers 403, and France 24 returns an HTML page instead of the feed.
• CNBC: the proxy cannot reach its feed host and answers 502 upstream_unreachable, but CNBC sends Access-Control-Allow-Origin: *, so call it directly.

Limits

• cors.dev free tier: GET and HEAD, 600 requests per minute per client IP, no daily or monthly quota, responses up to 1 MiB. Every feed in the table is under 200 KB, and the biggest one checked, The Guardian International at 395 KB, still fits.
• Headers: send a plain fetch() with no custom headers. The free tier forwards only Accept, If-None-Match and If-Modified-Since and answers 400 header_not_allowed when your code or HTTP library adds Authorization or a custom header such as X-Api-Key.
• Polling: refresh every 5 to 15 minutes and cache between visits; feeds do not change every second.
• Reuse: a feed is free to read, not free to republish. Show headlines with a link back, and check the terms of the publisher before you use full text or images in a product.

Good questions.