时间戳

首页 > 解决方案 > 设置代理以处理 arcgis js api 的 CORS

javascript - 设置代理以处理 arcgis js api 的 CORS

问题描述

序言：

我正在尝试将一个图层拉入我的 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 错误

CORS 政策已阻止从源“https://cdpn.io”访问“https://maps.disasters.nasa.gov/ags04/rest/services/ca_fires_202008/sentinel2/MapServer?f=json”获取：请求的资源上不存在“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 任何地方的代理 URL 为前缀。但响应本身只是 cors 任何地方代理的文本，因此出现错误：

在此处输入图像描述

正如我提到的，我的开发环境是 vscode 实时服务器和 webpack 开发服务器，这取决于正在构建的应用程序的哪个部分。我的目标生产环境是 github pages - 我真的没想到这个应用程序需要后端。如果我需要服务器端来提供代理，我可以将它作为全栈应用程序托管在 heroku 甚至 AWS 上。尝试使用预先提供的 arcgis 代理时，我遇到了同样的问题。例如，我将他们的代理存储库克隆到我的目录：

在此处输入图像描述

当配置urlUtils引用这些代理之一时，它会这样做，但只是返回代理文件的文本内容并给我Unexpected token T in JSON at position 0错误。esri 论坛上有很多关于 IIS 的聊天，但我是一个 mac 人，没有这方面的经验。Esri 提供 .NET、java 或 PHP 中的代理，我没有这方面的经验。

我怎样才能摆脱这些 cors 错误并正确地将层从 nasa 服务器拉到我的应用程序中。如果我需要代理，如何设置一个既适用于我的开发环境又适用于生产环境的代理？在我的水平上，我很难找到适用于这种情况的教程。谢谢阅读。

标签： javascriptproxycorsarcgis-js-api

解决方案

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

为了使其工作，您需要设置代理。就像你提到的 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。

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

推荐阅读