当我尝试在Axios中使用Google Place自动完成API时出现CORS错误

Question

我在TypeScript中设置了一个非常简单的类，以使用Axios作为HTTP客户端从Google访问“放置自动完成” API，但是请求失败并返回CORS错误。

import axios from 'axios'

export default class GoogleRequester {
  private apiKey: string = ''

  constructor (apiKey: string) {
    this.apiKey = apiKey
  }

  placesAutocomplete (query: string) {
    let requestString = `https://maps.googleapis.com/maps/api/place/queryautocomplete/json?key=${this.apiKey}&input=${encodeURIComponent(query)}`
    return axios.get(requestString)
  }
}

无法加载https://maps.googleapis.com/maps/api/place/queryautocomplete/json?key=＆input = fre：所请求的资源上没有“ Access-Control-Allow-Origin”标头。 因此，不允许访问源' http：// localhost：8080 '。

怎么做的好？

Answer 1

我自己偶然发现了这个问题。 基本上，如果您从浏览器发出请求，则必须使用Google Maps Javascript API。 对于其他Google图书馆（例如Google地方图书馆），您的请求必须来自服务器。 这个github问题实际上很好地解释了这一点： https : //github.com/googlemaps/google-maps-services-js/issues/59#issuecomment-399626833