javascript - 通过AJAX读取静态地图时出现Unafe标头警告(Unafe header waring when reading static map via AJAX)

Question

When I get static map image via AJAX to check for the error, I get:

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

Refused to get unsafe header "x-staticmap-api-warning"

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

(in chrome)

(（镀铬）)

I don't know much about headers, but it seems they had to be allowed on the server.

(我对标头了解不多，但是似乎必须在服务器上允许标头。)

It is right?

(这是正确的？)

Or is there anything I can do?

(还是我能做些什么？)

For completion my code:

(为了完成我的代码：)

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();
}

  ask by WuDo translate from so

Answer 1

I figured out what the issue is, there's nothing wrong with your code.

(我弄清楚了问题所在，您的代码没有错。)

The issue is that the address you are using in (mapaddress) for the URL is incomplete or missing details.

(问题是您在(mapaddress)使用的URL地址不完整或缺少详细信息。)

In the documentation for Static Maps API - Error Messages it says:

(在“ 静态地图API-错误消息 ”文档中，该消息说：)

For some error conditions, the API returns a map but some information may be missing from the map.

(对于某些错误情况，API返回一个映射，但是映射中可能缺少某些信息。)

When this happens, two conditions occur to inform you of the warning.

(发生这种情况时，有两种情况会通知您。)

One, the map displays, but with a yellow error bar superimposed over top of the map with the text "Map error: g.co/staticmaperror".

(第一，显示地图，但在地图上方叠加了黄色错误栏，文字为“地图错误：g.co/staticmaperror”。)

Two, the API returns a warning in the form of an HTTP header named X-Staticmap-API-Warning.

(第二，API以名为X-Staticmap-API-Warning的HTTP标头的形式返回警告。)

I have also tried your URL replacing it with an address that works and it works fine.

(我还尝试了您的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

(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)