#RSS CORS ERROR

1 messages · Page 1 of 1 (latest)

calm shoal
calm shoal
#

Code:

fetch('https://teaclient.net/news.xml')
  .then(response => response.text())
  .then(data => {
    // Parse XML data
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(data, 'application/xml');

    // Get RSS items
    const items = xmlDoc.querySelectorAll('item');

    // Output items to console
    items.forEach(item => {
      console.log(`Title: ${item.querySelector('title')?.textContent}`);
      console.log(`Link: ${item.querySelector('link')?.textContent}`);
      console.log(`Description: ${item.querySelector('description')?.textContent}`);
    });
});
mild anchor
#

You can't access resources on other sites using JS in your browser if the upstream didn't set CORS headers to allow you to do so.

One of the options is to just add CORS headers (assuming your site is on cloudflare pages, https://developers.cloudflare.com/pages/functions/examples/cors-headers/ will be the relevant docs. If its not CF pages, find your webserver here https://enable-cors.org/server.html or look up its own docs).

Another option to follow if you do not have access to the server or can't change the headers is this: https://docs.astro.build/en/guides/data-fetching/ since fetching data in those 3 dashes (I dont know the name lol) is done server side, but that also means you will have to either have SSR, or have a static page that will need to be rebuilt every time the rss feed changes

Adding CORS headers · Cloudflare Pages docs

This example is a snippet from our Cloudflare Pages Template repo.

enable cross-origin resource sharing

CORS support site

Docs
Data Fetching

Learn how to fetch remote data with Astro using the fetch API.

calm shoal
grizzled slate
#

You'll need to set that Access-Control-Allow-Origin header on the server side e.g. to allow all requests or just localhost:4321 for testing.

As an alternative, you could also set up an Astro endpoint that fetches the remote xml for you to get around CORS

calm shoal
#

So build an api endpoint?