CORS policy issue with WFSLayer requests

540
0
12-21-2020 11:02 PM
kattoor
New Contributor II

Hello,

I am getting the below CORS policy issue when I am trying to load a simple WFS Feature Service using esri/WFSLayer.

Access to XMLHttpRequest at 'https://ons-inspire.esriuk.com/arcgis/services/Other_Boundaries/National_Parks_December_2018_Boundar...' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Please find below the source code I'm using to load the map.

The below code works only with this service url - https://dservices.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/services/JapanPrefectures2018/WFSServer

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>WFS Layer</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.34/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.27/"></script>
<script>
var map;

require(["esri/map", "esri/InfoTemplate", "esri/layers/WFSLayer", "esri/dijit/Legend",
"esri/config", "dojo/domReady!"
], function(Map, InfoTemplate, WFSLayer, legend, esriConfig) {
map = new Map("map", {
basemap: "streets",
center: [-101.17, 21.78],
zoom: 7
});
esriConfig.defaults.io.corsEnabledServers.push("ons-inspire.esriuk.com");
//var url = "https://dservices.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/services/JapanPrefectures2018/WFSServer"; //Working
var url = "https://ons-inspire.esriuk.com/arcgis/services/Other_Boundaries/National_Parks_December_2018_Boundar..." //Not working
var opts = {
"url": url,
"version": "2.0.0",
"name": "National_Parks__December_2018__Full_Clipped_Boundaries_GB"
// "name": "JapanPrefectures2018"
};
var layer = new WFSLayer();

layer.fromJson(opts);
map.addLayer(layer);
});
</script>
</head>

<body>
<div id="map"></div>
</body>
</html>

When I analyzed the network calls, the initial GET request is successful, but the subsequent preflight request is failing due to the CORS issue. Is this due to the namespace server reference points to different servers? Could anyone please help us on this issue?

Note:
For local testing I am disabling the WebSecurity in chrome and it worked, but would like to get a permanent solution for this issue.

The above code is referred from link
The code referred from the link  also didn't work. The service url's are seems to be broken for this example.

Tags (3)
0 Kudos
0 Replies