通过 AJAX 读取静态地图时的不安全标头警告

Posted 2023-02-23

【中文标题】通过 AJAX 读取静态地图时的不安全标头警告

【英文标题】：Unafe header waring when reading static map via AJAX

【发布时间】：2018-07-23 14:52:49

【问题描述】：

当我通过 AJAX 获取静态地图图像以检查错误时，我得到：

拒绝获取不安全的标头“x-staticmap-api-warning”

（在铬）

我对标头了解不多，但似乎必须在服务器上允许它们。这是正确的？或者有什么我可以做的吗？

为了完成我的代码：

getImageUrl(mapAddress) 
    return "https://maps.googleapis.com/maps/api/staticmap?center=" + encodeURIComponent(mapAddress) + "&markers=color:red%7C" + encodeURIComponent(mapAddress) + "&zoom=17&size=" + this.state.boxWidth + "x" + this.state.boxHeight + "&maptype=roadmap&key=" + GOOGLE_KEY;


getImage(mapAddress) 
    let url = this.getImageUrl(mapAddress);
    let xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);

    // Ask for the result as an ArrayBuffer.
    xhr.responseType = "arraybuffer";

    xhr.onload = (e) => 
        let warning;

        try 
            warning = xhr.getResponseHeader('x-staticmap-api-warning');
         catch (e) 

        if (warning && warning.indexOf('Error geocoding') === 0) 
            this.setState(
                imageFound: false,
                loading: false
            );
        
        else 
            let imageBlob = new Blob([new window.Uint8Array(xhr.response)]);
            let imageUrl = URL.createObjectURL(imageBlob);

            this.setState(
                imageFound: true,
                imageSrc: imageUrl,
                loading: false
            );
        
    ;
    xhr.send();

【问题讨论】：

您只是想在您的页面上显示静态地图图像吗？如果是这样，为什么不把网址放在 iframe 中。

我想在找到地址时显示地图。而且我不想在geo-API之前提出特殊要求。

和 iframe 一样：静态图像更快，因为我们要过渡到服务器端渲染，所以 iframe 根本不适合。

好吧，仍然没有解释你为什么要进行 ajax 请求，只需将你的 url 添加到 img 标签的 src 中：<img src="https://maps.googleapis.com/maps/api/staticmap?center=" + encodeURIComponent(mapAddress) + "&markers=color:red%7C" + encodeURIComponent(mapAddress) + "&zoom=17&size=" + this.state.boxWidth + "x" + this.state.boxHeight + "&maptype=roadmap&key=" + GOOGLE_KEY;/>

我确实想以我的风格向他们展示“找不到地址”，而不是带有黄色警告的空谷歌地图。静态地图在 x-staticmap-api-warning 标头中返回该错误....

【参考方案1】：

OP 搞清楚了吗？

所有答案都不起作用，因为我和我也假设 OP，如果找不到地址，则只需不显示图像。

所以我们需要验证地址：

a) 首先通过地理编码地址来检查它是否有效 b) 或者监听来自静态映射的响应头。

似乎后者不是一个选项...只是作为谷歌处理静态地图服务错误的一种奇怪方式出现。

【讨论】：

我通过变通方法使它工作。我为此创建了服务器 API 函数。所以浏览器询问我的服务器 API，它从谷歌地图加载响应并将这个标题检查到我的心脏内容。并将结果返回给浏览器或错误信息。它不漂亮，但......它的工作原理。

【参考方案2】：

我发现了问题所在，您的代码没有任何问题。问题是您在 (mapaddress) 中使用的 URL 地址不完整或缺少详细信息。

在Static Maps API - Error Messages 的文档中说：

对于某些错误情况，API 会返回地图，但地图中可能缺少某些信息。发生这种情况时，会出现两种情况来通知您警告。

一，地图显示，但有一个黄色的错误栏叠加在 地图顶部带有文本“地图错误：g.co/staticmaperror”。

两个， API 以名为的 HTTP 标头的形式返回警告 X-Staticmap-API-Warning。

我还尝试将您的 URL 替换为有效的地址，并且效果很好。

https://maps.googleapis.com/maps/api/staticmap?center=plaza+catalunya+barcelona&markers=color:red%7Cplaza+catalunya+barcelona&zoom=17&size=600x300&maptype=roadmap&key=YOUR_KEY