arcgis_js_api_4.11 TileLayer跨域问题.txt

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，
    在中仿照着添加ArcGIS Server 地址，
    之后一定注意重启IIS服务，否则无效，我的是下图：
    
    
        
            
            
            
        
    
    
    
    之后可以用浏览器访问：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"  //部署的代理文件地址
     });

完整代码类似这样：



    
    
    
    
    



    




此网页需放在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：*
管理网站：重新启动