# Issue loading xml-feed in p5js

**URL:** https://discourse.processing.org/t/issue-loading-xml-feed-in-p5js/8212
**Category:** Coding Questions
**Created:** [February 8, 2019, 10:09am UTC](https://discourse.processing.org/t/issue-loading-xml-feed-in-p5js/8212 "2019-02-08T10:09:14Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![AndreasRef](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/andreasref/32/133_2.png) [@AndreasRef](https://discourse.processing.org/u/AndreasRef)
#### Post date: [February 8, 2019, 10:09am UTC](https://discourse.processing.org/t/issue-loading-xml-feed-in-p5js/8212/1 "2019-02-08T10:09:14Z")

</div>

Hi

I am wondering how to correctly get load an xml file from an external website in p5js. In Processing it is no issue using loadXML on the url, but in p5js it seems more complicated, and just calling loadXML with the raw url does not give any results.

As an example, I am interested in getting all of the content inside the \<title\> tags from this site: [https://ekstrabladet.dk/rssfeed/sport/](https://ekstrabladet.dk/rssfeed/sport/)

I had @GoToLoop help me out in the old Processing forum, but the solution he helped me make (and thank you a lot for that!) stopped working earlier this week for some reason… I don’t really understand how the HerokuApp and CORS proxies work, so any help would be much appreciated.

Here is the link to the original thread on the old forum:

> **[Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/22668/issue-loading-xml-feed-in-p5js)**
>
> Processing is an electronic sketchbook, a language and a worldwide community. This is its forum.

---

<div class="post-metadata">

### Author: ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [February 8, 2019, 6:03pm UTC](https://discourse.processing.org/t/issue-loading-xml-feed-in-p5js/8212/2 "2019-02-08T18:03:31Z")

</div>

> [@AndreasRef](#):
>
> … stopped working earlier this week for some reason…

I don’t think the proxy being used on that old sketch is active anymore. 😟

Also, that EkstraBladet.dk site seems to be now HTTPS exclusively. The old sketch uses HTTP. 🙄

Therefore we need to find another proxy & change the constant HTTP to `'https://'`. 💦

In that old forum thread I had posted a list of proxies: 📮

> <https://gist.github.com/jimmywarting/ac1be6ea0297c16c477e17f8fbe51347>

And on its comments, there are some more active CORS proxies listed. 🗒

I’ve simply picked this 1 and it worked: 🥳

> **[GitHub - super3/yacdn.org: Yet Another CDN.](https://github.com/super3/yacdn.org)**
>
> Yet Another CDN. Contribute to super3/yacdn.org development by creating an account on GitHub.

Basically I’ve mainly changed these lines from the old sketch and made some other cleanups too: 🕶

```auto
const HTTP = 'https://',
      PROX = 'YaCDN.org/', MODE = 'proxy/',

```

Here’s the new link for the updated “loadXML() from EkstraBladet via Proxy” sketch: 🔗

> <https://gist.github.com/GoSubRoutine/5bdec67b4f70080bfddb6c0607cb6c70>
>
> There are more than three files. show original

```javascript
/**
 * loadXML() from EkstraBladet via Proxy (v2.0)
 * Andreas_Ref & GoToLoop (2019-Feb-08)
 *
 * https://Discourse.Processing.org/t/issue-loading-xml-feed-in-p5js/8212/2
 *
 * https://Bl.ocks.org/GoSubRoutine/5bdec67b4f70080bfddb6c0607cb6c70
 *
 * https://EkstraBladet.dk/rssfeed/sport/
 * https://Gist.GitHub.com/jimmywarting/ac1be6ea0297c16c477e17f8fbe51347
*/

"use strict";

const HTTP = 'https://',
      PROX = 'YaCDN.org/', MODE = 'proxy/',
      SITE = 'EkstraBladet.dk/', FOLD = 'rssfeed/', QRY = 'sport/',
      LINK = HTTP + PROX + MODE + HTTP + SITE + FOLD + QRY,
      FILE = 'sport.xml',
      REMOTE = true,
      TAG = 'title',
      LIST = 'ol', ITEM = 'li',
      titles = [];

let xml;

function preload() {
  console.info(LINK);
  xml = loadXML(REMOTE && LINK || FILE, print, console.warn);
}

function setup() {
  noCanvas(), noLoop();

  const items = xml.getChild('channel').getChildren('item');

  for (const item of items) {
    print(item.listChildren());
    titles.push(item.getChild(TAG).getContent());
  }

  const ol = createElement(LIST)
            .style('color', 'blue')
            .style('font-weight: bold')
            .style('font-size: 1.2em');

  for (const title of titles) createElement(ITEM, title).parent(ol);
}

```

---

<div class="post-metadata">

### Author: ![AndreasRef](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/andreasref/32/133_2.png) [@AndreasRef](https://discourse.processing.org/u/AndreasRef)
#### Post date: [February 9, 2019, 10:28am UTC](https://discourse.processing.org/t/issue-loading-xml-feed-in-p5js/8212/3 "2019-02-09T10:28:38Z")

</div>

Again you are my hero!  
Thank you so much 🤩

Do you know why loading xml needs to go through a proxy in javaScript (p5js) but not in Java (Processing)?

---

<div class="post-metadata">

### Author: ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [February 9, 2019, 3:27pm UTC](https://discourse.processing.org/t/issue-loading-xml-feed-in-p5js/8212/4 "2019-02-09T15:27:44Z")

</div>

CORS protection access got nothing to do w/ programming languages. 👅

CORS is a browser exclusive “feature”: 🤪

> **[Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)**
>
> Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin.

---

<div class="post-metadata">

### Author: ![AndreasRef](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/andreasref/32/133_2.png) [@AndreasRef](https://discourse.processing.org/u/AndreasRef)
#### Post date: [March 18, 2021, 2:08pm UTC](https://discourse.processing.org/t/issue-loading-xml-feed-in-p5js/8212/6 "2021-03-18T14:08:01Z")

</div>

It stopped working again for some reason. I tried changing to [GitHub - Freeboard/thingproxy: A simple forward proxy server for processing API calls to servers that don't send CORS headers or support HTTPS.](https://github.com/Freeboard/thingproxy) as proxy but without any luck. Any chance you can figure out a new solution @GoToLoop ?

---

<div class="post-metadata">

### Author: ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [March 18, 2021, 2:32pm UTC](https://discourse.processing.org/t/issue-loading-xml-feed-in-p5js/8212/7 "2021-03-18T14:32:46Z")

</div>

> [@AndreasRef](#):
>
> Any chance you can figure out a new solution?

Well, you’ve gotta try to search for another workable CORS proxy.  
From the proxy list I’ve found out “All Origins” seems to still be working:

> **[All Origins](https://allorigins.win)**
>
> Pull contents from any page via API (as JSON/P or raw) and avoid Same-origin policy problems.

Here’s the full URI using this other proxy:  
[http://api.AllOrigins.win/get?url=https://EkstraBladet.dk/rssfeed/sport/](http://api.AllOrigins.win/get?url=https://EkstraBladet.dk/rssfeed/sport/)

---

<div class="post-metadata">

### Author: ![AndreasRef](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/andreasref/32/133_2.png) [@AndreasRef](https://discourse.processing.org/u/AndreasRef)
#### Post date: [March 18, 2021, 3:18pm UTC](https://discourse.processing.org/t/issue-loading-xml-feed-in-p5js/8212/8 "2021-03-18T15:18:38Z")

</div>

Right thanks so much for helping once again!  
I tried with [http://api.AllOrigins.win/get?url=https://EkstraBladet.dk/rssfeed/sport/](http://api.allorigins.win/get?url=https://EkstraBladet.dk/rssfeed/sport/) but it gives me an error saying:  
`p5.js:78248 Mixed Content: The page was loaded over HTTPS, but requested an insecure resource 'http://api.allorigins.win/get?url=https://ekstrabladet.dk/rssfeed/sport/'. This request has been blocked; the content must be served over HTTPS.`

When changing from [http://api.AllOrigins](http://api.AllOrigins)… to [https://api](https://api)… (changing the s), I get no error, but don’t seem to get access to anything?

Here is a simple sketch of my attempt: [p5.js Web Editor](https://editor.p5js.org/AndreasRef/sketches/oLfb8W69D)

---

<div class="post-metadata">

### Author: ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [March 18, 2021, 4:01pm UTC](https://discourse.processing.org/t/issue-loading-xml-feed-in-p5js/8212/9 "2021-03-18T16:01:25Z")

</div>

- Sorry but I’m getting the same error. 🐛
- Apparently it loads via **loadXML()**, but it gets an empty body! 😲
- Seems like you’re gonna need to look up for a better CORS proxy then. 🔭
- This is my current attempt adapted from my previous sketch: 🥴

```auto
/**
 * loadXML() from EkstraBladet via Proxy (v2.0.2)
 * Andreas_Ref & GoToLoop (2019-Feb-08)
 *
 * https://Discourse.Processing.org/t/issue-loading-xml-feed-in-p5js/8212/9
 *
 * https://Bl.ocks.org/GoSubRoutine/5bdec67b4f70080bfddb6c0607cb6c70
 *
 * https://EkstraBladet.dk/rssfeed/sport/
 * https://Gist.GitHub.com/jimmywarting/ac1be6ea0297c16c477e17f8fbe51347
*/

"use strict";

const HTTP = 'https://',
      // PROX = 'YaCDN.org/', MODE = 'proxy/',
      PROX = 'api.AllOrigins.win/', MODE = 'raw?url=',
      SITE = 'EkstraBladet.dk/', FOLD = 'rssfeed/', QRY = 'sport/',
      LINK = HTTP + PROX + MODE + HTTP + SITE + FOLD + QRY,
      FILE = 'sport.xml',
      REMOTE = true,
      TAG = 'title',
      LIST = 'ol', ITEM = 'li',
      titles = [];

let xml;

function preload() {
  console.info(LINK);
  xml = loadXML(REMOTE && LINK || FILE, print, console.warn);
}

function setup() {
  noCanvas(), noLoop();

  const items = xml.getChild('channel').getChildren('item');

  for (const item of items) {
    print(item.listChildren());
    titles.push(item.getChild(TAG).getContent());
  }

  const ol = createElement(LIST)
            .style('color', 'blue')
            .style('font-weight: bold')
            .style('font-size: 1.2em');

  for (const title of titles) createElement(ITEM, title).parent(ol);
}

```

P.S.: Never mind, it’s working now! 🥳

After reading further from [https://AllOrigins.win](https://AllOrigins.win) I’ve spotted an alternative mode to “get” called “raw”. 😳

This new URI proxy should successfully work for p5js’ **loadXML()** now: 🤞  
[https://api.AllOrigins.win/raw?url=https://EkstraBladet.dk/rssfeed/sport/](https://api.AllOrigins.win/raw?url=https://EkstraBladet.dk/rssfeed/sport/)

---

<div class="post-metadata">

### Author: ![AndreasRef](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/andreasref/32/133_2.png) [@AndreasRef](https://discourse.processing.org/u/AndreasRef)
#### Post date: [March 18, 2021, 4:11pm UTC](https://discourse.processing.org/t/issue-loading-xml-feed-in-p5js/8212/10 "2021-03-18T16:11:56Z")

</div>

Awesome! Thanks so much again 🙏 🤩 😀

---

<div class="post-metadata">

### Author: ![AndreasRef](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/andreasref/32/133_2.png) [@AndreasRef](https://discourse.processing.org/u/AndreasRef)
#### Post date: [September 13, 2021, 1:43pm UTC](https://discourse.processing.org/t/issue-loading-xml-feed-in-p5js/8212/11 "2021-09-13T13:43:37Z")

</div>

Hi again @GoToLoop , I hope it is okay I ask yet again about a related issue.

How might I correctly load the xml for [Google suggest xml](https://suggestqueries.google.com/complete/search?output=toolbar&hl=dk&q=hey)  
When using `api.AllOrigins.win` which worked (and still works 🥳) for the other rssfeed, it does not seem to work for this particular website.

---

<div class="post-metadata">

### Author: ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [September 13, 2021, 3:41pm UTC](https://discourse.processing.org/t/issue-loading-xml-feed-in-p5js/8212/12 "2021-09-13T15:41:05Z")

</div>

> [@AndreasRef](#):
>
> , it does not seem to work for this particular website.

Indeed that CORS service isn’t compatible w/ [SuggestQueries.Google.com](http://SuggestQueries.Google.com).

I’ve changed it to [CorsAnywhere.HerokuApp.com](http://CorsAnywhere.HerokuApp.com) and it’s just worked:

> <https://gist.github.com/GoSubRoutine/33ba95eb188bbb6cd04e96e2d950b02b>
>
> There are more than three files. show original

---

<div class="post-metadata">

### Author: ![AndreasRef](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/andreasref/32/133_2.png) [@AndreasRef](https://discourse.processing.org/u/AndreasRef)
#### Post date: [September 14, 2021, 9:10am UTC](https://discourse.processing.org/t/issue-loading-xml-feed-in-p5js/8212/13 "2021-09-14T09:10:21Z")

</div>

Thanks so much @GoToLoop ! In Chrome I do get a warning about [CorsAnywhere.HerokuApp.com](http://CorsAnywhere.HerokuApp.com) potentially being unsafe (see screenshot). Are there any alternatives?

 ![Screenshot 2021-09-14 at 11.06.44](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a3cfb672263c722127af5d769deb40264ce593a2.png)

---

<div class="post-metadata">

### Author: ![AndreasRef](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/andreasref/32/133_2.png) [@AndreasRef](https://discourse.processing.org/u/AndreasRef)
#### Post date: [September 14, 2021, 10:18am UTC](https://discourse.processing.org/t/issue-loading-xml-feed-in-p5js/8212/14 "2021-09-14T10:18:29Z")

</div>

Hmm, it seems like I can use [https://test.cors.workers.dev/](https://test.cors.workers.dev/)? instead of [CorsAnywhere.HerokuApp.com](http://CorsAnywhere.HerokuApp.com), will give this some tests…