WMSLayer Popup shows a sameorigin error

ClintonLunnUGS — Tue, 13 Aug 2024 21:37:57 GMT

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:

Re: WMSLayer Popup shows a sameorigin error

ClintonLunnUGS — Thu, 15 Aug 2024 00:21:31 GMT

I seem to have answered my own question. For me, the key is to use the fetchFeatureInfoFunction function, and make a custom popup template there. I'm not sure if there's a better way to do this, definitely open to suggestions.

In addition, I am not sure how long this wms source will be active for (this is a dev server that we are test driving Geoserver on). I will try to swap it out with another WMS layer that hopefully won't go away.

See working code 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.30</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/MapView", "esri/layers/WMSLayer", "esri/Graphic"], (Map, MapView, WMSLayer, Graphic) => { const url = "https://geoserver225-ffmu3lsepa-uc.a.run.app/geoserver/public/ows"; const sublayerName = "quaternaryfaults"; const layer = new WMSLayer({ url, sublayers: [{ name: sublayerName, popupEnabled: true, queryable: true }], fetchFeatureInfoFunction: async (query) => { console.log('running feature info func', layer); // Set info_format to request GeoJSON. query.info_format = "application/json"; // Construct the URL for the feature info request. const featureInfoUrl = `${layer.featureInfoUrl}?${new URLSearchParams(query).toString()}`; try { const response = await fetch(featureInfoUrl); if (!response.ok) { throw new Error("Network response was not ok"); } const data = await response.json(); return data.features.map( (feature) => new Graphic({ attributes: feature.properties, popupTemplate: { title: "Quaternary Faults {faultnum}", content: [{ type: "fields", fieldInfos: [ { fieldName: "label", label: "Description" }, { fieldName: "faultage", label: "Fault Age" }, { fieldName: "faultnum", label: "Fault Number" }, { fieldName: "qffhazardunit", label: "QFF Hazard Unit" }, { fieldName: "usgs_link", label: "USGS Link" }, { fieldName: "faultnum", label: "Fault Number" }, ] }] } }) ); } catch (error) { console.error("Failed to fetch feature info:", error); return []; } } }); const map = new Map({ basemap: 'streets', layers: [layer] }); const view = new MapView({ container: "viewDiv", map: map, spatialReference: { wkid: 102100 } }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>

topic Re: WMSLayer Popup shows a sameorigin error in ArcGIS JavaScript Maps SDK Questions

WMSLayer Popup shows a sameorigin error

Re: WMSLayer Popup shows a sameorigin error