在項目實際應用中，有時候需要在發(fā)送請求中添加一些自定義的請求頭，那現(xiàn)在來看看SuperMap二維iClient客戶端中是如何是使用的捏

1.版本支持情況

二維iClient for Leaflet/Openlayers/MapboxGL 從SuperMap iClient 10i版本起就支持增加。

2.使用前準備

由于SuperMap iServer中有設置的允許的請求頭參數(shù)名配置，在前端設置請求頭前，需在iServer解壓目錄\webapps\iserver\WEB-INF\web.xml中的cors.allowed.headers增加value,譬如，現(xiàn)在我們需要增加token,apptoken這兩個自定義參數(shù)，則需按照下圖添加

<init-param>
        <param-name>cors.allowed.headers</param-name>
        <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,token,apptoken</param-value>
 </init-param>

如果不進行配置，在前端請求時，會看到如下錯誤：

image.png

Tips:token這個自定請求頭在SuperMap iServer10i的版本后，iServer會進行解析，驗證的是用戶的令牌（當該服務進行授權,需通過token令牌驗證是否有權限訪問該服務。所以自定義自己的請求頭時，不要以token為名

3. iClient for Leaflet/Openlayers/MapboxGL具體使用

3.1和iServer有交互的功能的service接口都可添加headers

即以 L.supermap.service(Leaflet),ol.supermap.service(Openlayers),mapboxgl.supermap.service(MapboxGL)接口都支持headers,Classic無此參數(shù)，可使用下面的全局設置*

#Leaflet
L.supermap
    .featureService(url,{headers: {
        apptoken: '...'
    }})
    .getFeaturesByGeometry(geometryParam, function (serviceResult) {});
}

#Openlayers
ol.supermap
    .featureService(url, {headers: {
        apptoken: '...'
    }})
    .getFeaturesByGeometry(geometryParam, function (serviceResult) {});
}

#MapboxGL
mapboxgl.supermap
    .featureService(url, {headers: {
        apptoken: '...'
    }})
    .getFeaturesByGeometry(geometryParam, function (serviceResult) {});
}

3.2 全局設置

在與iServer的服務交互的功能前，重寫下面的方法帶上自定義請求頭token，進行全局設置

#  iClient for Leaflet/Openlayers/MapboxGL
SuperMap.FetchRequest.commitbak = SuperMap.FetchRequest.commit;
SuperMap.FetchRequest.commit = function (method, url, params, options) {
    options.headers = options.headers || {
        token: '42f_WTvu4du_QouTxU9C6qSRiQml38DVN2vXyjOT-wbhYwfKu1qKqA6_fvAW_I_cC1Zthpgeb7gxOxbpyeATsQ..'
        }
    return SuperMap.FetchRequest.commitbak(method, url, params, options)
        }
#Classic
SuperMap.Util.commit= SuperMap.Util.committer;
SuperMap.Util.committer = function (options) {
    options.headers = options.headers || {
        token: '42f_WTvu4du_QouTxU9C6qSRiQml38DVN2vXyjOT-wbhYwfKu1qKqA6_fvAW_I_cC1Zthpgeb7gxOxbpyeATsQ..'
        }
    return  SuperMap.Util.commit(options)
        }

Tip:Classic中，和iSever所以域不是同一域的話，會請求jsonp格式，但是jsonp請求實質是嵌入<script>的方式，請求頭無法傳遞。故需要添加自定義請求，可強制發(fā)送.json請求

方式：isInTheSameDomain設置為true

 getFeatureBySQLService = new SuperMap.REST.GetFeaturesBySQLService(url2, {
            eventListeners: {"processCompleted": processCompleted, "processFailed": processFailed}，
            isInTheSameDomain：true
        });

這篇主要介紹和iserver交互的功能接口添加請求頭，在下一篇會詳細介紹地圖瓦片如何添加