cross domain ajax request of plain text file

Question

I'm struggling with a problem that seems easy. I have a json data that is stored as a plain text file on some server and I need to load it in javascript. I am getting error

XMLHttpRequest cannot load http://www.cgarea.com/ary_telemetry/messages.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access.

I was reading about CORS and testing different solutions with no success. If the destination URL was a PHP script I could set a header('Access-Control-Allow-Origin: *') but it's just a text file. How can I load this? Do I need to create a tiny PHP script to just return file content?

I put a minimal code on http://jsfiddle.net/rt6jj5tv/6/

Any tips appreciated, thanks.

JS code:

function GetMessages()
{
    //$.getJSON("http://www.cgarea.com/messages.json", GetMessagesCB);      
  $.ajax({
            type: 'GET',
            url: "http://www.cgarea.com/messages.json",
            dataType: "text/plain",
            success: GetMessagesCB
            });
}

function GetMessagesCB(data)
{
    console.debug(data);
    var ui = document.getElementById("Message");
    ui.innerHTML = data;
}

GetMessages();

score 1 · Accepted Answer · edited May 23 '17 at 11:45

1

As you have alluded to, you need to run a JSONP or CORS proxy in order to retrieve the text file via AJAX from another domain. This is a security mechanism built into the browser.

You can add a header to a PHP script of your own to serve this purpose. Another possible method would be to use YQL.

The code:

function GetMessages()
{
  $.getJSON("http://query.yahooapis.com/v1/public/yql",
    {
      q:      "select * from json where url=\"http://www.cgarea.com/messages.json\"",
      format: "json"
    },
    function (data) {
      if (data.query.results) {
        GetMessagesCB(data.query.results.json);
      } else {
        alert('bad');
      }
    }
  );
}

function GetMessagesCB(data)
{
    console.debug(data);
    var ui = document.getElementById("Message");
    ui.innerHTML = JSON.stringify(data);
}

GetMessages();

Your fiddle updated: http://jsfiddle.net/rt6jj5tv/7/

edited May 23 '17 at 11:45

Community

1
1

answered Mar 10 '16 at 01:17

Stephen Watkins

25,047
15
66
100

Thanks Stephen This almost works. I'm getting my data, but for some reason keys are changed. Instead date 2016-03-09_15:58:18 I get _016-03-09_15:58:18. Any clues? Also trying to fix this I noticed that changes to JSON file are not reflected, as if it was cached somewhere. thanks – michal Mar 10 '16 at 09:47
Right, both issues have to do with YQL I believe. YQL has caching to prevent abuse of their service and they also parse the JSON response "smartly". Try looking into the following two links to address both issues: http://www.yqlblog.net/blog/2010/03/12/avoiding-rate-limits-and-getting-banned-in-yql-and-pipes-caching-is-your-friend/ and https://developer.yahoo.com/yql/guide/response.html#response-structure – Stephen Watkins Mar 10 '16 at 14:41
Finally I just serve this through PHP. But at least I learned about YQL! Thanks – michal Mar 10 '16 at 21:55

score 0 · Answer 2 · answered Mar 10 '16 at 02:30

0

I'm sorry, for some reason I thought there was PHP.
Well, to fully answer your question you need to enable CORS on the server side. Unless you own:http://www.cgarea.com/ary_telemetry/messages.json there's not much you can do other than contacting the person who owns that site.

answered Mar 10 '16 at 02:30

Joe Thomas

5,807
6
25
36

Hi wateriswet, I own cgarea.com it's on hosting account. Do you know how/where can I find PHP this configuration? – michal Mar 10 '16 at 09:51

cross domain ajax request of plain text file

2 Answers2