1

My situation is that there is JSON data on a page I would like to work with, however I cannot seem to fetch the data. Either I get the error

Uncaught SyntaxError: Unexpected token : or XMLHttpRequest cannot load URL. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

The last one is if I remove the ?callback=? from the URL I'm using. The URL I'm trying to fetch data from is this: http://mxsimulator.com/servers/server.tmfactory-racing.com:19803/tracks/sx2016r01anaheim/records_450f

<!DOCTYPE html>
<html>
<head>
<title>JSON</title>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">

    $(document).ready(function(){
        $.getJSON("http://mxsimulator.com/servers/server.tmfactory-racing.com:19803/tracks/sx2016r01anaheim/records_450f?callback=?",
            function(data){
                alert("Something");
            });
      });

</script>
</head>
<body>

<div id="datahere"></div>

</body>
</html>

All I want to do here essentially is to get the data into some form of object/variable I can work with and present in a way I could have use of it. I've tried a lot of ways I've found through googling, but I always end up with either of the 2 error messages mentioned above.

Any input in how I can get this to work is deeply appreciated.

Aravindh Gopi
  • 2,083
  • 28
  • 36
Wahlmat
  • 53
  • 3
  • You cannot call directly from javascript to third party server(same origin policy) you should call it from your backend(python, php, node...) – Jan Giacomelli May 07 '17 at 10:41

2 Answers2

0

The error is clear: you're doing a GET request on a server where the HTTP field "Origin" can not be "null".

If you're the owner of the server you can fix this with some lines (the following example is in node js).

var express = require('express');
var app = express();

var port = process.env.PORT || 8080;
var status = false;
var secret_id = "segreto";

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

app.get('/', function (req, res) {
  res.send('Hello World, please use a GET /getState to see the current state of the library');
});

By client side, this resolution will work fine for you.

Community
  • 1
  • 1
Thecave3
  • 762
  • 12
  • 27
  • I'm unfortunately not the owner of the server, but I took a look at the other link you provided. I have a bit of a question, he's sending data that is "mydata" and "setHeader". Do I also need those? I can see that the header is also getting some sort of 'token' in it, would I need that too? Am I getting "unexpected token" from not having one? – Wahlmat May 07 '17 at 11:46
  • No, your HTTP request must not have the "Origin" header empty or null. – Thecave3 May 07 '17 at 12:43
  • this is a list of [http](https://en.wikipedia.org/wiki/List_of_HTTP_header_fields) header fields. You have to add to your HTTP request. I usually do not use jquery so the most that I can do is help you to search [this could be a solution](http://stackoverflow.com/questions/10093053/add-header-in-ajax-request-with-jquery). I thought that you were the owner of the calling server. – Thecave3 May 07 '17 at 12:47
0

This error is by design, and due to browser security reasons you are not allowed to fetch scripts or data cross-domain. You are trying to use JSONP to get around this, but the resource you are requesting is not returning JSONP, it's returning a regular JSON-response.

You'll need to either:

  • Fetch this data in your back-end, and then deliver it to your front-end.
  • Get the resource you are requesting to return JSONP.
DJ_Icebear
  • 203
  • 2
  • 8
  • Wasn't sure whether my try contained "JSONP" in it, yet looking at it there seem to be none of it. Thanks for the wiki link, always good to get some more inside. – Wahlmat May 07 '17 at 11:29