当我尝试将 google place 自动完成 API 与 Axios 一起使用时出现 CORS 错误

Posted

技术标签:

【中文标题】当我尝试将 google place 自动完成 API 与 Axios 一起使用时出现 CORS 错误【英文标题】:CORS error when I try to use google place autocomplete API with Axios 【发布时间】:2018-10-11 09:07:48 【问题描述】:

我在 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” 访问。

如何做好?

【问题讨论】:

不要使用 Axios。关注the documentation。使用 Google 的 API 客户端库。 使用 corsanywhere 怎么样?常量 PROXY_URL = 'cors-anywhere.herokuapp.com'; axios.get(PROXY_URL + requestString) XMLHttpRequest cannot load No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' Google maps的可能重复 【参考方案1】:

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

【讨论】:

请将解决问题的尝试分享为Minimal, Complete, and Verifiable example,并将其作为edit 包含在您的问题中。

以上是关于当我尝试将 google place 自动完成 API 与 Axios 一起使用时出现 CORS 错误的主要内容,如果未能解决你的问题,请参考以下文章

Google Places API Android:自动完成关闭太快

Google Places 自动完成 React 组件

Google Places API,使用邮政编码自动完成

在 Google Places 自动完成 iOS api 中包含距离

如何将 Google Maps Places Library 的自动完成功能限制为仅推荐一个城市的地点?

即使使用正确的 API 密钥,Android 自动完成的 Google Places API 请求也会被拒绝