Extract external domain xml data with jquery

82
April 16, 2018, at 07:22 AM

I have an error in the browser when extracting the xml data from an external domain through jquery ajax.

I try to do it this way:

$.ajax({
    type: "GET" ,
     url: "http://api.radionomy.com/currentsong.cfm?radiouid=E8FBFBE1-E50F-4E6A-BEA7-CA2E41F96D0B&apikey=cf41bd17-7638-4c10-b869-341555a65d7f&type=xml&previous=yes&next=yes&cover=yes&callmeback=yes&defaultcover=yes" ,
dataType: "xml" ,   
 success: function(xml) {

    var title = $(xml).find('title').text(),  
    artist = $(xml).find('artists').text(); 

Actc(title, artist);

    }
});

I have that ajax request within a setinterval that updates the data every 20 seconds.

It goes well for a while, but then gives this error in the browser (Chrome) and stops reading the xml information:

Failed to load http://api.radionomy.com/currentsong.cfm?radiouid=XXXXXXXX&apikey=xxxxxxx&callmeback=yes&type=xml&cover=yes&previous=yes: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost.canal' is therefore not allowed access. The response had HTTP status code 403.

I have searched for information but I can not get clear. It seems that it is not possible to extract xml content from a different domain with ajax unless CORS is enabled on my server.

https://developer.mozilla.org/es/docs/Web/HTTP/Access_control_CORS

Although I tried to add it to .htaccess without success, since I kept giving the error. I have also tried to do it by php but also without success. Surely I do something wrong, I'm not very expert in this regard.

htaccess:

<IfModule mod_rewrite.c>
  Header add Access-Control-Allow-Origin: "*"
  Header add Access-Control-Allow-Methods: "GET, POST, PATCH, PUT, DELETE, OPTIONS"
  Header add Access-Control-Allow-Headers: "Origin, Content-Type, X-Auth-Token"
  Header add Content-Type: "application/json"
</IfModule>

How could I extract the XML data without CORS problems?

Answer 1

Regarding the CORS it refers to the remote server, not your own. So the Radionomy need to enable it on their server.

But you mention that it works coorect for a bit, which implies that they correctly set it (those times).

So unless it is an issue on their side, it could be that in their api docs, the callmeback value that the request returns, specifies when the next query should occur. But you have hardcoded it to 20 seconds. Perhaps they are blocking you because you try too soon and they consider it abuse.

Another way to bypass the CORS is for your ajax call to call a page on your server which will be the one to make the remote call to the API. That is because CORS is only in effect when the call is made from the browser.

READ ALSO
How to select a specific start for an increment and reset it

How to select a specific start for an increment and reset it

Ive been spending countless hours trying to figure it outWhat I am trying to make is an animating slide show

76
jQuery $.ajax() find method

jQuery $.ajax() find method

I'm having difficulty passing the data returned from the server to the correct element in my code, although I can see the response in the developer tools and find seems to return the correct selectorThe example is from the book found here

55
I&#39;m having a double click issue activating jQuery function

I'm having a double click issue activating jQuery function

I've found similar answers that solve the double click issue when first calling a jQuery function, usually from having a click() function inside another click() or missing the $(document)ready

45
Reset CKEditor5 form

Reset CKEditor5 form

Sorry if this has been discussed before, but I have searched exhaustively and only found solutions to the older version, not 5I want to have two buttons for my forms, SEND and RESET

65