如何在 getTileUrl 中为 ImageMapType Javascript 添加授权 header

Question

在为 Google 地图 API.

创建 TileOverlay 时，我想访问一些托管在需要用户/通行证的不同主机上的自定义地图图块

所以这是我当前的代码 Javascript:

var carte = new google.maps.ImageMapType({
    getTileUrl: function (tileCoord, zoom) {
        var url = "http://host.com/" + (zoom + 1) + "/" + (tileCoord.x + 1) + ":" + (tileCoord.y + 1) + "/tile.png";
        return url;
    }, 
    tileSize: new google.maps.Size(256, 256), 
    minZoom: 8, 
    opacity: 0.6
});
map.overlayMapTypes.push(carte);

由于连接returns 401 已授权，我无法访问磁贴。我如何在 Javascript/Jquery 中传递 Authorization header 让 url 知道我有权访问这些磁贴？

我正在寻找这样的解决方案，但在 Javascript 中：

Answer 1

当用户代理想要发送服务器身份验证凭据时，它可能会使用授权字段。

授权字段构造如下：

用户名和密码由一个冒号组合而成。生成的字符串使用 Base64 的 RFC2045-MIME 变体进行编码，但不限于 76 char/line。然后将授权方法和 space 即 "Basic " 放在编码字符串之前。

来源：Http Authentication

$.ajax({
        type: // POST OR GET,
        url: //your url,
        headers: {
            Authorization:"Basic "+new Buffer(name+':'+pass).toString('base64'),
            "Content-Type" : //according to you
        }
        })
       .done(function(data) { });

Answer 2

我通过实施代理找到了解决方案。这是实现的代码：

var carte = new google.maps.ImageMapType({
        getTileUrl: function (tileCoord, zoom) {
            return 'http://myhost/myController/getTile?url=http://externe_url/' + (zoom + 1) + "/" + (tileCoord.x + 1) + ":" + (tileCoord.y + 1) + "/tile.png";
        }, 
        tileSize: new google.maps.Size(256, 256),  
        minZoom: 8,  
        opacity: 0.6
    });

我的控制器代码：

def getTile() {
def result
try {
    def http = new HTTPBuilder()
    try {
        http.setHeaders([Authorization: 'Basic ' + 'user:pass'.bytes.encodeBase64().toString()])
        http.request(params.url, Method.GET, ContentType.BINARY) { req ->
            response.success = { resp, retour ->
                result = retour.bytes
            }
        }
    } catch (IOException | URISyntaxException e) { }
}

if(result) {
    // on renvoie au navigateur le contenu de l'image
    response.status = HttpServletResponse.SC_OK
    response.contentType = 'image/x-png'
    response.outputStream << result
    response.outputStream.flush()
}
else {
    response.status = HttpServletResponse.SC_NO_CONTENT
}
}

如何在 getTileUrl 中为 ImageMapType Javascript 添加授权 header

How to add Authorization header in getTileUrl for ImageMapType Javascript

javascript

jquery

google-maps

http-headers