0

I'm trying to get my data to show up as an object in the console. But it fails to do so and console logs "error". Only other thing that shows up in the console is a Cross-Origin-Read-Blocking warning. No errors though. How can I get my data to log on the console? Thanks

 $.ajax({
    url: "valid url that returns JSON",
    type: "GET",
    dataType: "jsonp",
    jsonp: "callback",
    headers: { "Accept": "application/javascript;odata=verbose" },
    success: function (response) {
        console.log(response);
    },
    error: function (xhr, ajaxOptions, thrownError) {
          console.log(xhr);
          console.log(ajaxOptions);
          console.log(thrownError);
      }
});

Before the code above, I had "json" instead of "jsonp" and "application/json" instead of "application/javascript" as shown in the code below, but these returned a 401 Unauthorized error as well as a "CORS no access-control-allow-origin header" error. When I added jsonp, these errors went away and a CORB warning was left (shown in the code above). But my json data still nowhere to be found. Console logging ajaxOptions results in a "parsererror". Console logging thrownError results in

Error: jQuery112409451109716420985_1542218619324 was not called
at Function.error (jquery.min.js:2) at h.jsonp.b.dataTypes.(anonymous function).b.converters.script json (http://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js:4:28685) at Xb (jquery.min.js:4) at y (jquery.min.js:4) at HTMLScriptElement.b.onload.b.onreadystatechange (jquery.min.js:4)"

$.ajax({
    url: "valid url that returns JSON",
    type: "GET",
    dataType: "json",
    jsonp: "callback",
    headers: { "Accept": "application/json;odata=verbose" },
    success: function (response) {
        console.log(response);
    },
    error: function (xhr, ajaxOptions, thrownError) {
          console.log(xhr);
          console.log(ajaxOptions);
          console.log(thrownError);
      }
});
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Daniel
  • 23
  • 1
  • 9
  • You've got `dataType: "jsonp"` and `"Accept": "application/json`. If you want jsonp, you need `application/javascript`, if you want json then you need to change the dataType to `dataType: "json"` –  Nov 14 '18 at 17:29
  • If that is the only problem then this is a duplicate of [What is the correct JSON content type?](https://stackoverflow.com/questions/477816/what-is-the-correct-json-content-type#477819) –  Nov 14 '18 at 17:34
  • I changed application/json to application/javascript and still no luck. The reason I changed json to jsonp in the first place was to get rid of a 401 unauthorized error, which worked and now the error is gone. But my json is still not being returned – Daniel Nov 14 '18 at 17:39
  • Well you were getting the CORS error because no Access-Control-Allow-Origin was set on the target. JSONP doesn't use CORS, but the response has to be in JSONP, or it won't work. I'm guessing that the response is really JSON and you need to deal with the origin problem. –  Nov 14 '18 at 18:24
  • That's what I was thinking too. I turn CORS on in chrome and the 'Access-Control-Allow-Origin' error disappears. Now all I'm left with is a 401 Unauthorized error – Daniel Nov 14 '18 at 18:28
  • The server backend needs to be configured to respond to OPTIONS requests with a 200 or 204 success message. –  Nov 14 '18 at 18:30
  • More on that: [Ajax CORS Request with http 401 in preflight](https://stackoverflow.com/q/44735921/4639281) –  Nov 14 '18 at 18:32
  • [_"If you use cross-origin resource sharing (CORS, e.g. trying an XMLHttpRequest to another server) it will send an OPTIONS request to check if the server expects cross-origin requests"_](https://stackoverflow.com/a/20818926/4639281) –  Nov 14 '18 at 18:35
  • I'm not making an OPTIONS request, I am making a GET request – Daniel Nov 14 '18 at 18:40
  • But because it is on a different origin, an OPTIONS request is made to see if the server expects cross origin requests –  Nov 14 '18 at 18:42
  • ok so how do i configure server backend? basically i need to contact my coworker who made the json in the first place? – Daniel Nov 14 '18 at 18:46
  • That would depend on the server. The easiest way would be to just serve the script from the same server that the JSON resides on. –  Nov 14 '18 at 18:47
  • Above and beyond that I would need to know what application is serving the content (Apache, NGINX, Node.JS, etc) and what access you have to modify said server application. –  Nov 14 '18 at 18:49
  • It's being served by Sharepoint – Daniel Nov 14 '18 at 18:53
  • This should be what you need: [Custom Headers ``](https://learn.microsoft.com/en-us/iis/configuration/system.webServer/httpProtocol/customHeaders/) –  Nov 14 '18 at 18:54
  • I just can't believe I need to do all that.....there's gotta be another way – Daniel Nov 14 '18 at 19:24
  • Is this just for testing purposes and eventually it will be on the same origin, or will it always be on a different origin? –  Nov 14 '18 at 19:25
  • im doing training at my office and it's basically a test simulation. they want us to fill this kendo grid with data from this endpoint. it won't be released to a client or anything. just wanna have a successful ajax GET call to this grid by any means necessary – Daniel Nov 14 '18 at 19:33
  • You could put your script into a userscript then load it on a desired page on the origin (can be a non-existent page, just has to be the right origin), then the request would be on the same origin. But this doesn't make any sense if it is a training thing, they should have set the Access-Control-Allow-Origin header. That seems like an oversight and is setting you up for failure. –  Nov 14 '18 at 19:39
  • [More information on userscripts](https://stackoverflow.com/tags/userscripts/info) –  Nov 14 '18 at 19:40
  • You're right! I was able to get it on a sharepoint page. I guess I'll just need to build it in sharepoint. Thanks – Daniel Nov 14 '18 at 20:05
  • No problem! Have a great day. –  Nov 14 '18 at 20:09

1 Answers1

-1

This works for me

    $.ajax({ 
    type: 'GET', 
    url: 'my_url', 
    data: { key: 'value' }, 
    dataType: 'json',
    success: function (data) { 
        console.log(data);
    },
    error: function (xhr, ajaxOptions, thrownError) {
        console.log(xhr);
        console.log(ajaxOptions);
        console.log(thrownError);
    }
});
Poul Bak
  • 10,450
  • 5
  • 32
  • 57
Melih
  • 23
  • 7
  • When I do 'json' it returns a 401 unauthorized error and a 'CORS no access-control-origin-header' error. when i use jsonp, no errors show up but my data is still not returning. when i console log ajaxOptions like you have me do, it returns parsererror...which i hear is common with jsonp – Daniel Nov 14 '18 at 18:14