设置代理来处理 arcgis js api 的 CORS

Question

序言：我正在尝试将一个图层拉入我的 arcgis-js-api 应用程序中，但我遇到了困难。该层在这里：https://maps.disasters.nasa.gov/ags04/rest/services/ca_fires_202008/sentinel2/MapServer我正在尝试以这种方式添加它：export const SC2Sept29 = new MapImageLayer({     url:             'https://maps.disasters.nasa.gov/ags04/rest/services/ca_fires_202008/sentinel2/MapServer/547', });运行我的应用程序时，我收到经典的 CORS 错误从源“https://cdpn.io”获取“https://maps.disasters.nasa.gov/ags04/rest/services/ca_fires_202008/sentinel2/MapServer?f=json”的访问已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明响应满足您的需求，请将请求模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。这是来自此 codepen ，但使用vscode live server或 webpack-dev-server进行本地开发时也会发生同样的情况。其他图层不会发生这种情况，仅来自maps.disasters.nasa.gov 服务器上的图层会发生这种情况。尝试设置代理当我尝试访问 NASA 层时，我从线程 CORS 错误中得到了一些建议，我需要为来自该服务器的任何内容设置代理。他们的建议是按照这些说明设置代理，并使用 arcgis 的现成代理之一。就我个人而言，我发现缺少代理存储库的说明。我设置服务器端应用程序的所有经验都是使用 Nodejs，但我不理解如何执行此操作的说明。我现在链接的 codepen 尝试在任何地方使用 CORS 代理，但将其设置在esr/core/urlUtils：urlUtils.addProxyRule({  urlPrefix: 'maps.disasters.nasa.gov',  proxyUrl: 'https://cors-anywhere.herokuapp.com',});但这给出了一个错误，指出Unexpected token T in JSON at position 0. 我可以在网络选项卡中看到浏览器确实正在尝试访问正确的层 URL，并正确地以 cors Anywhere 代理 URL 为前缀。但响应本身只是 cors Anywhere 代理的文本，因此出现错误：正如我提到的，我的开发环境是 vscode live 服务器和 webpack 开发服务器，具体取决于我构建的应用程序的哪个部分。我的目标生产环境是 github 页面 - 我真的没想到这个应用程序需要后端。如果我需要服务器端来提供代理，我可以将其作为完整堆栈应用程序托管在 Heroku 甚至 AWS 上。当尝试使用预先提供的 arcgis 代理时，我遇到了同样的问题。例如，我将他们的代理存储库克隆到我的目录中：当配置urlUtils为引用这些代理之一时，它会这样做，但只返回代理文件的文本内容并给出错误Unexpected token T in JSON at position 0。esri 论坛上有很多关于 IIS 的讨论，但我是一名 Mac 用户，对此没有任何经验。Esri 提供 .NET、java 或 PHP 代理，但我没有这方面的经验。我怎样才能摆脱这些 cors 错误并正确地将层从 nasa 服务器拉到我的应用程序中。如果我需要代理，如何设置一个既适用于我的开发环境又适用于生产环境的代理？我很难找到适合我这种情况的教程。谢谢阅读。

Answer 1

好吧，我想现在我们可以总结一下了。

为了使其工作，您需要设置代理。就像你提到的，ESRI 提供了一些不同技术的实现。

我分叉了他们的存储库，以便包含使用 docker 和 docker-compose 的简单测试设置。资源代理分叉

克隆运行后，

sudo docker-compose -f docker-compose.php.yml up -d --build

测试代理，

http://localhost:8082/proxy?ping

nasa-service.html在它们中，您还可以找到显示应用程序和代理的正确配置的示例（全部位于 PHP 文件夹中）。

只需要跑http://localhost:8082/nasa-service.html。

这里的关键是应用程序需要与代理位于同一源。