arcgis api for js 中使用API的代理页面(跨越配置)

以下仅作为自己阅读官网api的对reques的理解做的备忘笔记。一知半解,仅供参考。

1、获取或者构建第三方代理

官网解释:代理在其自己的 Web 服务器上安装并运行,而不是在 Esri 服务器或安装了 ArcGIS Enterprise 的计算机上安装和运行(除非您的 Web 服务器还托管 ArcGIS Enterprise 实例)。

个人理解:通常使用了arcgis api for js的应用项目,基本都会买arcgis产品,安装在指定服务器上(例如这里的服务器地址端口号是192.168.0.11:8001),并在此地址端口号进行服务的发布。而使用的项目不一定会安装在同一个服务器之上。即:esri服务器与应用项目服务器并不是同一个。

2、代理路径配置

官网解释:为了使应用程序通过代理路由请求,必须向应用程序添加代码,以定义代理的托管位置。如果应用程序中的所有请求都使用相同的代理,请使用请求对象的代理Url 属性指定位置。

javascript 复制代码
require(["esri/config"], function(esriConfig) {
  esriConfig.request.proxyUrl = "/proxy/Java/proxy.jsp";
});

官网解释:还可以使用特定的代理规则配置应用程序。这些规则指示代理使用具有相同 URL 前缀的特定资源。当应用程序尝试通过此 URL 访问资源时,将通过指定的代理发送请求。请求的 proxyRules 属性是列出所有这些代理规则的对象。要填充它,请使用 urlUtils.addProxyRule()。

javascript 复制代码
require(["esri/core/urlUtils"], function(urlUtils) {
  urlUtils.addProxyRule({
    urlPrefix: "http://localhost:6080",//地图服务地址前缀要请求的地址
    proxyUrl: "http://localhost:8080/Java/proxy.jsp"//部署的代理文件地址
  });
});

3、request.interceptors拦截器

允许开发人员在发送请求之前或之后修改请求。 将使用与请求 URL 匹配的第一个拦截器。

javascript 复制代码
//官网示例
const featureLayerUrl = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0";

esriConfig.request.interceptors.push({
  // set the `urls` property to the URL of the FeatureLayer so that this
  // interceptor only applies to requests made to the FeatureLayer URL
  urls: featureLayerUrl,
  // use the BeforeInterceptorCallback to check if the query of the
  // FeatureLayer has a maxAllowableOffset property set.
  // if so, then set the maxAllowableOffset to 0
  before: function(params) {
    if (params.requestOptions.query.maxAllowableOffset) {
      params.requestOptions.query.maxAllowableOffset = 0;
    }
  },
  // use the AfterInterceptorCallback to check if `ssl` is set to 'true'
  // on the response to the request, if it's set to 'false', change
  // the value to 'true' before returning the response
  after: function(response) {
    if (!response.ssl) {
      response.ssl = true;
    }
  }
});

//拦截,在所有服务地址头部添加需要的头部信息(放在加载地图资源之后,调用服务之前)
self.esriConfig.request.interceptors = []
            self.esriConfig.request.interceptors.push({
                before: function (params) {
                        const A = "A"
                        const B = "B"
                        params.requestOptions.headers = {
                            A: A,
                            B: B
                        }
                   
                }
            });
相关推荐
小妖6662 分钟前
React input 输入卡顿问题
前端·javascript·react.js
李明卫杭州1 小时前
Vue2 portal-target 组件与 Vue3 的针对性优化
前端·javascript·vue.js
你怎么知道我是队长3 小时前
JavaScript的函数介绍
开发语言·前端·javascript
weedsfly3 小时前
观察者模式 vs 发布-订阅模式:从概念到实战,一次讲清楚
前端·javascript·面试
咪饭只吃一小碗3 小时前
告别微调成本!用 RAG 本地向量库解决大模型私有领域数据接入
javascript·后端·面试
miss3 小时前
海康威视 IoT 平台前端实战:视频流、海量设备与实时数据可视化
前端·javascript·物联网
mONESY3 小时前
MCP 协议实战博客:跨进程、跨语言可复用 AI 工具标准化方案
javascript
糖墨夕4 小时前
第一章:为什么你要学 AI Agent?—— 从"切图仔"到全栈的进化之路
前端·javascript·vue.js
自律懒人4 小时前
ChatGPT Work 上线当天实测:GPT-5.6 Sol 把 Codex 塞进桌面应用,跨应用自动做报表和 PPT,一个指令干 3 小时的活
javascript·开源
不听话坏13 小时前
Ignition篇(下 一) 动态执行前的事情
开发语言·前端·javascript