How does the IdentifyTask handle proxy/cross-origin issues?

Question

Background:

I'm trying to perform an Identify against an ArcGIS Server layer, without using the ArcGIS Server JS API, and am running into issues which don't occur when using the ArcGIS Server JS API.

1. Download the Display identify results in popup sample to your local web server

2. Click on a parcel, and note that the Identify task runs against the sample server using these parameters. The results are correctly returned to the browser.

3. In a simple HTML page with jQuery enabled, I'm trying to run the equivalent query using a direct AJAX call to the layer's Identify task on the ArcGIS Server REST API:

     var geometry = decodeURIComponent('%7B%22x%22%3A' + -9270290 + '%2C%22y%22%3A' + 5247184 + '%7D');
   
     var data = {
       "sr": 102100,
       "tolerance": 3,
       "maxAllowableOffset": 0.1,
       "returnGeometry": true,
       "imageDisplay": "1920,938,96",
       "mapExtent": "9270703,5246922,-9270168,5247482",
       "geometry": geometry,
       "geometryType": "esriGeometryPoint",
       "f": "json",
       "layers": "all:0,2"
     }
   
     $.ajax({
       dataType: "json",
       type: 'GET',
       url: "https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer/identify",
       data: data,
       success: function(result){
         console.log("success");
       },
       error: function(error){
         console.log("error");
       }
     });
   

4. The resulting URL works in the browser, but the AJAX call fires the error function, with a cross-origin error message: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access:

My question:

How is the IdentifyTask.execute function (from in the ArcGIS Server JS API) able to avoid this cross-origin error? And/or how can I emulate that behaviour using a direct AJAX query?

Answer 1

Have you tried setting the dataType to jsonp in your ajax call? It can be used to circumvent some of the CORS errors. More info here

Answer 2

Change this portion of your code: dataType: "json" TO dataType: "jsonp". Make sure to leave the value of the "f" param to "json".

$.ajax({
    dataType: "jsonp",
    type: 'GET',
    url: "https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer/identify",
    data: data,
    success: function(result){
    alert(result);
      console.log("success");
    },
    error: function(error){
      console.log("error");
    }
  });