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

170
6
2 weeks ago
billzhang
New Contributor

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:

<script>
var map;
require([
"dojo/parser",
"dojo/ready",
"dojo/_base/array",
"esri/Color",
"dojo/dom-style",
"dojo/query",

"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() {

0 Kudos
6 Replies
Vakhtang_Zubiashvili
Occasional Contributor II

Hi,

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

0 Kudos
billzhang
New Contributor

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

0 Kudos
LaurenBoyd
Esri Contributor

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/ 

0 Kudos
billzhang
New Contributor

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? 

0 Kudos
JoelBennett
Occasional Contributor III

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

0 Kudos
billzhang
New Contributor

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

0 Kudos