Help! Unable to add webmap

Question

Trying to add a webmap but even in the sandbox I get

Fetch API cannot load https://tileservice.charts.noaa.gov/tiles/wmts/1.0.0/WMTSCapabilities.xml due to access control checks.
https://tileservice.charts.noaa.gov/tiles/wmts/1.0.0/WMTSCapabilities.xml

Origin xyz is not allowed by Access-Control-Allow-Origin

var webmap = new WebMap({
 portalItem: {
 id: "ec16ffd3c25b4e3d8af9c1bf9a14af08"
 }
 });

Any suggestions?

Noah Sager · Answer

It looks like the 4x API is a bit more strict with cors and ssl than the 3x version (which is why I think it displays in the 3x based AGO Map Viewer). If you add a proxy to the mix, the wmts webmap displays fine.

Resources:

CORS with the API | ArcGIS API for JavaScript 4.14

GitHub - Esri/resource-proxy: Proxy files for DotNet, Java and PHP.

https://codepen.io/noash/pen/BayWZKv  (codepen does not run, but if you supply a link to your proxy and run locally, it will work)