arcgis_js_api_4.11 TileLayer跨域问题.txt

最新推荐文章于 2023-09-06 11:32:07 发布

学无止境慢慢来

最新推荐文章于 2023-09-06 11:32:07 发布

阅读量2.8k

点赞数 3

分类专栏： arcgis_js_api IIS 跨域

原文链接：https://blog.csdn.net/wml00000/article/details/86694385

版权

arcgis_js_api 同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

跨域

6 篇文章 0 订阅

订阅专栏

IIS

2 篇文章 0 订阅

订阅专栏

arcgis_js_api_4.11 TileLayer跨域问题.txt
转载：https://blog.csdn.net/wml00000/article/details/86694385
参考：https://developers.arcgis.com/javascript/latest/guide/proxies/index.html

一、场景：
    Access to image at 'http://localhost:6080/arcgis/rest/services/MyMapService/MapServer/tile/11/74344/433106?blankTile=false'
    from origin 'http://localhost:63342' has been blocked by CORS policy:
    No 'Access-Control-Allow-Origin' header is present on the requested resource.
二、解决方法：
1.下载代理文件，地址：https://github.com/Esri/resource-proxy/releases
    代理在本地Web服务器上运行，而不是在Esri服务器或安装ArcGIS服务器的计算机上运行
    (除非您的Web服务器还承载ArcGIS服务器实例)。
    有三个代理可供下载，每个代理针对特定的服务器端平台：
    ASP.NET
    Java/JSP
    PHP
    下载平台的适当代理。每个代理下载包括安装说明和任何系统要求的信息。
    确保您遵循这些说明，以便在您的Web服务器上设置和配置代理。
2.使用代理：
    如果应用程序中的所有请求都使用相同的代理，请使用请求对象的proxyurl属性指定位置。
    require(["esri/config"], function(esriConfig) {
      esriConfig.request.proxyUrl = "/resource-proxy/Java/proxy.jsp";
    });
    还可以使用特定的代理规则配置应用程序。这些规则为具有相同url前缀的特定资源定义代理。
    当应用程序试图通过此url访问资源时，请求将通过指定的代理发送。
    esriConfig.request.proxyRules属性是一个对象，列出了所有这些代理规则。
    要填充该属性，使用 urlUtils.addProxyRule()。
    require(["esri/core/urlUtils"], function(urlUtils) {
      urlUtils.addProxyRule({
        urlPrefix: "route.arcgis.com",
        proxyUrl: "/resource-proxy/Java/proxy.php"
      });
    });
3.我这边用的是ASP.NET版本的，要部署到IIS下面，IIS需要提前安装配置好。
4.部署代理文件，将下载的DotNet文件夹拷贝到IIS对应目录下，
    一般都是C:\inetpub\wwwroot文件夹下面；
    打开IIS服务管理器，在DotNet文件夹上右键单击，选择“转换为应用程序”。
    注意应用池选择v4.0或以上。
    点击“确定”。
5.测试代理文件是否部署成功，
    浏览器输入http://localhost/DotNet/proxy.ashx?http://services.arcgisonline.com/ArcGIS/rest/services/?f=pjson
    如果出现下图，说明部署成功
    {
     "currentVersion": 10.6,
     "folders": [
      "Canvas",
      "Elevation",
      "Ocean",
      "Polar",
      "Reference",
      "Specialty",
      "WorldElevation3D"
     ],
     "services": [
      {
       "name": "NatGeo_World_Map",
       "type": "MapServer"
      },
      {
       "name": "USA_Topo_Maps",
       "type": "MapServer"
      },
      {
       "name": "World_Imagery",
       "type": "MapServer"
      },
      {
       "name": "World_Physical_Map",
       "type": "MapServer"
      },
      {
       "name": "World_Shaded_Relief",
       "type": "MapServer"
      },
      {
       "name": "World_Street_Map",
       "type": "MapServer"
      },
      {
       "name": "World_Terrain_Base",
       "type": "MapServer"
      },
      {
       "name": "World_Topo_Map",
       "type": "MapServer"
      }
     ]
    }
6.修改代理文件，打开DotNet文件夹下的proxy.config，
    在<serverUrls>中仿照着添加ArcGIS Server 地址，
    之后一定注意重启IIS服务，否则无效，我的是下图：
    <?xml version="1.0" encoding="utf-8" ?>
    <ProxyConfig allowedReferers="*"
                 mustMatch="true">
        <serverUrls>
            <serverUrl url="http://services.arcgisonline.com"
                       matchAll="true"/>
            <serverUrl url="http://60.28.130.xxx:6080"
                       matchAll="true"/>
            <serverUrl url="http://localhost:6080"
                       matchAll="true"/>
        </serverUrls>
    </ProxyConfig>
    
    <!-- See https://github.com/Esri/resource-proxy for more information -->
    之后可以用浏览器访问：http://localhost/DotNet/proxy.ashx?http://localhost:6080/arcgis/rest/services 测试一下
7.代码中引入 "esri/core/urlUtils"模块，添加代码：
    urlUtils.addProxyRule({
         urlPrefix: "http://60.28.130.xxx:6080",  //配置文件proxy.config中的地址,要请求的地址
         proxyUrl: "http://localhost/DotNet/proxy.ashx"  //部署的代理文件地址
     });

完整代码类似这样：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>切片地图4.11</title>
    <link rel="stylesheet" href="http://localhost/arcgis_js_v411_api/arcgis_js_api/library/4.11/esri/css/main.css">
    <script src="http://localhost/arcgis_js_v411_api/arcgis_js_api/library/4.11/init.js"></script>
    <style>
        html, body, #viewDiv{
            padding: 0;
            margin: 0;
            height: 100%;
        }
    </style>
</head>
<script>
    require([
        "esri/Map",
        "esri/layers/TileLayer",
        "esri/Basemap",
        "esri/views/MapView",
        "esri/core/urlUtils"
    ], function (Map,TileLayer,Basemap, MapView,urlUtils) {

        urlUtils.addProxyRule({
            urlPrefix: "http://127.0.0.1:6080",
            proxyUrl: "http://localhost/DotNet/proxy.ashx"
        });
        var layer = new TileLayer({
            // url: "https://services.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer"
            url: "http://127.0.0.1:6080/arcgis/rest/services/HD_TEST/HD_TiledMap/MapServer"
        });
        var basemap = new Basemap({
            baseLayers: [layer]
        });
      var map = new Map({
          basemap: basemap
      });
      var view = new MapView({
        container: "viewDiv",  // Reference to the scene div created in step 5
        map: map,  // Reference to the map object created before the scene
      });
    });
</script>
<body>
    <div id="viewDiv"></div>
</body>
</html>

此网页需放在C:\inetpub\wwwroot下测试。
若更改到其他任意位置，需对IIS进行跨域配置。

打开IIS，选择DotNet文件夹，找到“HTTP响应标头”双击，
在右侧可以看到添加，然后添加如下标头即可
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers：origin,x-requested-with,content-type
Access-Control-Allow-Methods：POST,GET,OPTIONS
Access-Control-Allow-Origin：*
管理网站：重新启动

学无止境慢慢来

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
arcgis_js_api_4.11 TileLayer跨域问题.txt

一、场景：Access to image at 'http://localhost:6080/arcgis/rest/services/MyMapService/MapServer/tile/11/74344/433106?blankTile=false'from origin 'http://localhost:63342' has been blocked by CORS policy...
复制链接

扫一扫