When attempting to retrieve a static map image using AJAX to check for errors, I encountered the following message:
Refused to get unsafe header "x-staticmap-api-warning"
(seen in Chrome)
I am not very familiar with headers, but it appears that they need to be allowed on the server. Is this correct? Or is there something else I should try?
To provide context, here is 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);
// Requesting 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();
}