Ajax Request returns JSON but throws error

Question

First of all: I searched for my error and found some useful hints, but they didn't resolve my error. In most of the asked questions, the problem was an invalid json response.

I'm doing an Ajax request to Google Maps Service via coffeescript:

console.log 'widget ready - make request'
distrequest = $.ajax 'https://maps.googleapis.com/maps/api/distancematrix/json',
    type: 'GET'
    data:
      origins: 'London',
      destinations: 'Berlin',
      language: 'de-DE',
      key: 'ACTUALGOOGLEKEY'
    #dataType: 'json' #tried to comment this out - same error
    error: (jqXHR, textStatus, errorThrown) ->
        console.log "Ajax error " + textStatus + " " + errorThrown
    success: (data, textStatus, jqXHR) ->
        console.log "success"
        console.log data

When i'm checking my console output, i see that the widget ready - make request is printed and then: Ajax error error

When i'm checking my network via firefox developer tools i see the following:

Method: GET
Status: 200
File: json?origins=...
Type: json
Response: {
"destination_addresses" : [ "London" ],
"origin_addresses" : [ "Berlin" ],
"rows" : [
   {
      "elements" : [
         {
            "distance" : {
               "text" : "24,7 km",
               "value" : 24732
            },
            "duration" : {
               "text" : "19 Minuten",
               "value" : 1146
            },
            "status" : "OK"
         }
      ]
   }
],
"status" : "OK"
}

First of all - i assume the json from google api is well formed. i can't see any errors, i didn't get a parse error, my network console firefox recognised the type json and shows me a (in my view) a valid json object. Somehow the Ajax error events is fired - but i don't know why, and the errorThrown is not helpful at all.

Sorry if this is a duplicate - any ideas? (i actually changed Origin and Destination as well as Google API Key regarding privacy. The returned values are correct information for my request - google maps won't think you can make it in 19 mins from London to Berlin)

edit: dataType: 'text' not working. jqXHR.responseText empty in error method

edit2: I added the following code to my error function:

        console.debug(jqXHR.responseText)
        console.log "Response Headers "+jqXHR.getAllResponseHeaders() 
        console.log "Status "+jqXHR.status
        console.log "Status Text "+jqXHR.statusText

which gives me a statusText error, an empty Header and responseText as well as a status code of 0

Regarding this answer https://stackoverflow.com/a/14507670/5119359 it could possibly be an CORS related thing? But would i get the JSON object than within my network firefox developer console?

Try to: "console.debug(jqXHR.responseText);" on the "error" event — Ofir Baruch, Feb 01 '17 at 09:28
@OfirBaruch this gives me an empty line, so obviously no responseText — fighter-ii, Feb 01 '17 at 09:37

score 0 · Answer 1 · answered Feb 08 '17 at 13:26

Sending the request from another origin I receive the reply: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I think it depends on the context you are executing the Ajax-request. Browsers disable CORS by default to prevent any data snooping. I suppose this is enabled in the Firefox Development, therefore the request is done successfull.

I am not sure in what context you run the above code. In case it is executed in Node with equal setup as I have, adding the setting $.support.cors = true should be enough.

$.support.cors = true
distrequest = $.ajax 'https://maps.googleapis.com/maps/api/distancematrix/json',
    type: 'GET'
    data:
      origins: 'London',
      destinations: 'Berlin',
      language: 'de-DE',
      key: 'ACTUALGOOGLEKEY'
    error: (jqXHR, textStatus, errorThrown) ->
        console.log "Ajax error " + textStatus + " " + errorThrown
    success: (data, textStatus, jqXHR) ->
        console.log "success"
        console.log data

Ajax Request returns JSON but throws error

1 Answers1