topic Re: No 'Access-Control-Allow-Origin' header is present on the requested resource in ArcGIS JavaScript Maps SDK Questions

No 'Access-Control-Allow-Origin' header is present on the requested resource

billzhang — Fri, 23 Sep 2022 00:23:22 GMT

In my html page I have the following script to pull the base map from ESRI Online. This page is hosted on a web server locally. I am getting the following error how. Could people help me address this issue? Thank you

Error:

Access to XMLHttpRequest at 'http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer?f=json' from origin 'http://...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Javascript in the HTML file:

"esri/map",
"esri/request",
"esri/graphic",
"esri/geometry/Extent",

"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/PictureMarkerSymbol",
"esri/renderers/ClassBreaksRenderer",

"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/ImageParameters",
"esri/layers/GraphicsLayer",
"esri/SpatialReference",
"esri/InfoTemplate",
"esri/geometry/Point",
"esri/geometry/webMercatorUtils",

"extras/AssetClusterLayer",
"dojo/dom",
"esri/dijit/BasemapToggle",
"esri/dijit/HomeButton",

"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(
parser, ready, arrayUtils, Color, domStyle, query,
Map, esriRequest, Graphic, Extent,
SimpleMarkerSymbol, SimpleFillSymbol, PictureMarkerSymbol, ClassBreaksRenderer,
ArcGISDynamicMapServiceLayer, ImageParameters, GraphicsLayer, SpatialReference, InfoTemplate, Point, webMercatorUtils,
AssetClusterLayer, dom, BasemapToggle, HomeButton
) {
ready(function() {

Re: No 'Access-Control-Allow-Origin' header is present on the requested resource

Vakhtang_Zubiashvili — Fri, 23 Sep 2022 13:56:10 GMT

Hi,

I am not sure but try using proxy,for same error when using WMS it works , try in tis case too.

Re: No 'Access-Control-Allow-Origin' header is present on the requested resource

LaurenBoyd — Fri, 23 Sep 2022 14:28:17 GMT

Hi @billzhang,

To support CORS, your web servers must be pre-configured for it and browsers must be able to support it. Sounds like the local web server mahy need to have CORS enabled. For additional details on enabling this in a web server, please visit enable-cors.org.

For more information about the API and CORS, see the following documentation: https://developers.arcgis.com/javascript/latest/cors/

Re: No 'Access-Control-Allow-Origin' header is present on the requested resource

JoelBennett — Fri, 23 Sep 2022 16:17:06 GMT

Maybe try using "https" in the URL instead of "http"...

Re: No 'Access-Control-Allow-Origin' header is present on the requested resource

billzhang — Fri, 23 Sep 2022 16:24:09 GMT

how to use proxy in this case? require(["esri/map",... not sure how to add a proxy in between yet.

Re: No 'Access-Control-Allow-Origin' header is present on the requested resource

billzhang — Fri, 23 Sep 2022 16:24:49 GMT

I am using require(["esri/map",... not sure how to use https for the esri online URL. any thoughts?

Re: No 'Access-Control-Allow-Origin' header is present on the requested resource

billzhang — Fri, 23 Sep 2022 23:12:17 GMT

trying to reach http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer?f=json.

The web server side to be configured is the arcgisonline side right?