Hi all,
Minimum example: https://codepen.io/clintonlunn/pen/eYweyzj?editors=1001
I am trying to troubleshoot why I cannot get a popup working when I am pulling a WMS layer from Geoserver. When I click, the popup shows, but only an error message is populated. The console shows: "Refused to display 'https://geoserver225-ffmu3lsepa-uc.a.run.app/' in a frame because it set 'X-Frame-Options' to 'sameorigin'."
When I copy the request into my api client tool (https://www.usebruno.com/), I get the data back that I expect.
See working curl request below:
```
curl 'https://geoserver225-ffmu3lsepa-uc.a.run.app/geoserver/public/ows?bbox=-13716921.203505095%2C3336548.400852591%2C-10751100.402747236%2C6302369.20161045&crs=EPSG%3A3857&format=image%2Fpng&request=GetFeatureInfo&service=WMS&styles=&transparent=TRUE&version=1.3.0&layers=quaternaryfaults&query_layers=quaternaryfaults&info_format=text%2Fhtml&feature_count=25&width=3840&height=3840&I=1744&J=1887' \
-H 'authority: geoserver225-ffmu3lsepa-uc.a.run.app' \
-H 'accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7' \
-H 'accept-language: en-US,en;q=0.9' \
-H 'referer: https://cdpn.io/' \
-H 'sec-ch-ua: "Not_A Brand";v="8", "Chromium";v="120", "Google Chrome";v="120"' \
-H 'sec-ch-ua-mobile: ?0' \
-H 'sec-ch-ua-platform: "macOS"' \
-H 'sec-fetch-dest: iframe' \
-H 'sec-fetch-mode: navigate' \
-H 'sec-fetch-site: cross-site' \
-H 'sec-fetch-user: ?1' \
-H 'upgrade-insecure-requests: 1' \
-H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36' \
--compressed
```
Pasting code from the original snippet below:
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>WMSLayer | Sample | ArcGIS Maps SDK for JavaScript 4.25</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.30/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.30/"></script>
<script>
require(["esri/Map", "esri/views/SceneView", "esri/layers/WMSLayer"], (
Map,
SceneView,
WMSLayer,
) => {
const layer = new WMSLayer({
url: "https://geoserver225-ffmu3lsepa-uc.a.run.app/geoserver/public/wms?",
sublayers: [{
name: "quaternaryfaults",
queryable: true,
popupEnabled: true
}]
});
const map = new Map({
basemap: 'streets',
layers: [layer]
});
const view = new SceneView({
container: "viewDiv",
map: map,
spatialReference: {
wkid: 102100
},
center: [-110, 39.6949],
zoom: 8
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
