배경

사고 지도의 서비스가 최근 개인 개발에서 시작되었다.

지도를 임의의 곳으로 돌리기 위해 검색 표를 설치했다.
사용자가 입력한 키워드를 GoogleMaps Geocoding API에 추가
이 키워드에 대응하는 위도를 가져와 맵을 이동합니다.
또 이 Geocoding API를 이용하기 위해 구글이 삼가한 google-maps-services-js을 사용했다.

당면한 문제

실제 코드에서는 이런 느낌으로 요청을 처리합니다.
Vue.js

const googleMapsClient = require("@google/maps").createClient({
  key: "API key XXXXXXXX",
  Promise: Promise
});


findLatLng() {
  googleMapsClient
    .geocode({
      address: this.searchWord // ユーザーが入力したキーワード
    })
    .asPromise()
    .then((response) => {
      console.log(response.json.results);
    })
    .catch(err => {
      console.log(err);
    });
}

macOS, Android는 위의 코드를 통해 응답 가능
왠지 모르게 iOS에서만 다음과 같은 오류가 발생했습니다. 처리에 실패했을 것입니다.TypeError: Request header field User-Agent is not allowed by Access-Control-Allow-Headers.

원인

나는 많은 것을 조사했지만 정확한 원인을 모른다.
하지만 다른 모듈을 써봤는데 잘 됐어요.
Google-maps-services-js의 어떤 문제의 가능성이 높습니다.

지원

실제로 vue2-geocoder를 사용하면 iOS에서도 응답을 받을 수 있다.
참고로 vue2-geocoder는 그 안에서 XMLHttpRequest로 요청을 던지는 아주 간단한 제작입니다.
vue2-geocoder의 처리 예시
Vue.js

findLatLng(evt) {
    evt.preventDefault()

    var self = this
    var addressObj = { address_line_1: this.searchWord }
    Vue.$geocoder.send(addressObj, response => {
        console.log(response)

        if (response.status == 'ZERO_RESULTS') {
             console.log("no result");
        } else {
             console.log(response.results[0]);
        }
    })
}