topic Re: Access-Control-Allow-Origin Error in Chorme Console in ArcGIS JavaScript Maps SDK Questions

Access-Control-Allow-Origin Error in Chorme Console

jimmiraza — Thu, 12 Mar 2015 14:17:27 GMT

I'm finding that when using 2.0, I get the following error:

MLHttpRequest cannot load http://......../DotNet/proxy.ashx?http://......../ArcGIS/rest/services/Qars/MapServer/0/query. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

above error shown in chrome and Firefox Console but work fine in internet explorer.

Can someone please provide me some guidance here?

Thanks!

Re: Access-Control-Allow-Origin Error in Chorme Console

BhavinSanghani — Thu, 12 Mar 2015 15:36:28 GMT

It's an issue related to CORS. There are many replies on this topic. Basically, server and client should be CORS enabled. e.g. ArcGIS Server that you are using should support CORS and browser (client in your case) you are using should support CORS too.

1) What is 2.0 in your question?

2) Are you using proxy? Without using proxy it works?

3) What arcgis server version you are using?

4) Are you using older versions of chrome/firefox but the latest version of IE? Check following link for the browser that supports CORS.

enable cross-origin resource sharing

Re: Access-Control-Allow-Origin Error in Chorme Console

jimmiraza — Fri, 13 Mar 2015 05:15:02 GMT

Thank You Bhavin for quick response

here is your question answers

1) 2.0 means i am using Arcgis javascript 2.0 version

2) yes i am using proxy. without using proxy its work fine

3) arcgis server ( We have purchased services from third party, i am not sure which arcgis server version they are using )

4) I Am using chorme 41 version and IE 11 version

I Am using proxy url. when I am sending post request from chorme or firefox then it shows Access control Allow error.

but work fine in internet explorer.

Can you please guide me how to send CORS request with proxy url, is it possible?

And also guide me how to enable CORS in chrome and firefox.

Here is my code.

var rings = ring[0];

dojo.parser.parse();

var queryTask = new esri.tasks.QueryTask(url_QARS_Search);

esri.config.defaults.io.proxyUrl = url_Proxy;

esri.config.defaults.io.alwaysUseProxy = false;

//build query filter

var query = new esri.tasks.Query();

query.returnGeometry = true;

query.outFields = ["*"];

query.geometryType = rings.type;

query.geometry = rings;

//query.where = search;

console.log(query);

dojo.connect(queryTask, "onComplete", function (results) {

debugger;

alert("onComplete");

if (!results) {

return;

}

debugger;

var loadGraphics = appLayers.map.graphics.graphics.length == 0;

var features = results.features;

var infoTemplate = new esri.InfoTemplate("ObjectID : ${OBJECTID}", "${*}");

//add table in div

var html = "";

html += "<table style='width:100%;overflow-x:hidden; overflow-y:auto'>";

html += " <tr style='background:lightgray;font-style:bold;'>";

html += "<td>OBJECTID </td>";

html += "<td>ZONE_NO </td>";

html += "<td>STREET_NO </td>";

html += "<td>BUILDING_NO</td>";

html += " </tr>";

//loop thru each graphic feature setting symbols and info templates

appLayers.map.centerAt(results.features[0].geometry);

dojo.forEach(results.features, function (results) {

var graphic = results;

var attrs = graphic.attributes;

if (true) {

debugger;

var symbol = new esri.symbol.PictureMarkerSymbol(

{

"angle": 10,

"xoffset": 0,

"yoffset": 0,

"type": "esriPMS",

"url": "img/pin.png",

"contentType": "image/png",

"width": 30,

"height": 30

});

appLayers.map.infoWindow.resize(300, 300);

graphic.setInfoTemplate(infoTemplate);

graphic.setSymbol(symbol);

appLayers.map.graphics.add(graphic);

html += " <tr>";

html += "<td>" + attrs.OBJECTID + "</td>";

html += "<td>" + attrs.ZONE_NO + "</td>";

html += "<td>" + attrs.STREET_NO + "</td>";

html += "<td>" + attrs.BUILDING_NO + "</td>";

html += " </tr>";

}

});

html += "</table>";

document.getElementById("gvlandmark").innerHTML = html;

});

dojo.connect(queryTask, "onError", function (errorRes) {

alert("erro" + errorRes);

});

//execute the query

queryTask.execute(query);

Re: Access-Control-Allow-Origin Error in Chorme Console

AdrianMarsden — Fri, 10 Dec 2021 22:57:51 GMT

This one has cursed me for years - I've still not really sorted it

adding

     require(["esri/config"], function (esriConfig) {
            esri.config.defaults.io.corsEnabledServers.push("eddc-gis2");
        });

helps for files that use the API - but I still get it when I create simple pages - the problem is no-one has given me an answer in simple terms what to check for - plus there is at least one Chrome issue logged that indicates this is a misleading error message.

Re: Access-Control-Allow-Origin Error in Chorme Console

BhavinSanghani — Mon, 16 Mar 2015 14:01:03 GMT

Jimmi,

You should be able to see ArcGIS server version on the map service rest endpoint.

As Adrian mentioned, add your arcgis server to esri.config.defaults.io.corsEnabledServers and then the error should go away.

Latest browsers support CORS so, we don't need to do anything for client. To support CORS on arcgis server, you may need to ask your provider to support CORS. What kind of infrastructure they have then accordingly they will have to enable CORS on it. e.g. provider is running arcgis server on windows machine and IIS is the webserver. Then some IIS configuration is required to update (as mentioned on enable-cors.org) so, arcgis server can be enabled for CORS.

I think, with ArcGIS 10.1 onwards we don't need proxy. I have no idea of older versions of arcgis server. You are using old ArcGIS API 2.0 and it might have limited support (not sure). Did you try the same code with the latest version of the API? If no errors with the latest api + same code then I would suspect on the API code.