Access ArcGIS Server Rest Service with jQuery

Question

I am trying to use jQuery to access an ArcGIS Server rest service. I keep getting:

Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers in preflight response

ESRI support swears that it is a jQuery problem because they can access those web services via their API, which is Dojo.

From my study on the web it appears to be an issue of headers. In my JavaScript I have tried numerous combinations of headers, for example:

$.ajax({  
     type: "Get", 
     //url: "get_esri_feature_service.php",
     url: "https://geohub.vancouver.ca/arcgis/rest/services/GDH/School/FeatureServer/0/query?where=1%3D1&geometryType=esriGeometryEnvelope&spatialRel=esriSpatialRelIntersects&units=esriSRUnit_Foot&outFields=objectid%2Cschoolname%2Caddress&returnGeometry=true&f=json",  
     dataType: "json", 
     crossDomain:true,
     headers: {'Access-Control-Allow-Origin': '*',
               'Access-Control-Allow-Methods': 'POST,GET,OPTIONS',
               'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'
              },
     success: getFeaturesSuccess, 
     error: ajaxError   
 });

Still it doesn't work. Any suggestions?

Answer 1

Try changing the dataType to jsonp, the f=json to f=pjson and get rid of the cross domain and headers as below:

$.ajax({
    type: "GET",
    url:"https://geohub.vancouver.ca/arcgis/rest/services/GDH/School/FeatureServer/0/query?where=1%3D1&geometryType=esriGeometryEnvelope&spatialRel=esriSpatialRelIntersects&units=esriSRUnit_Foot&outFields=objectid%2Cschoolname%2Caddress&returnGeometry=true&f=pjson",
    dataType:'jsonp',
    success: getFeaturesSuccess,
    error: ajaxError
});

This worked for me.