Google 地图地理编码 API 中的 CORS 错误

Question

我遇到了一个相当突然的 Google 地图地理编码问题。直到昨天一切都工作正常，但从那时起，我在向其地理编码 API 发出的任何请求上都收到 CORS 错误。

我的要求：

https://maps.googleapis.com/maps/api/geocode/json?latlng=18.92187618976372,72.82581567764282&key=<API_KEY>

我的请求标头：

Provisional headers are shown
Accept:application/json, text/plain, */*
Origin:http://domain
Referer:http://domain/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.89 Safari/537.36
X-FirePHP-Version:0.0.6

响应标头：

access-control-allow-origin:*
alternate-protocol:443:quic,p=1
cache-control:public, max-age=86400
content-encoding:gzip
content-length:1279
content-type:application/json; charset=UTF-8
date:Thu, 23 Jul 2015 09:50:49 GMT
expires:Fri, 24 Jul 2015 09:50:49 GMT
server:mafe
status:200
vary:Accept-Language
x-frame-options:SAMEORIGIN
x-xss-protection:1; mode=block

错误信息：

XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/geocode/json?latlng=18.92187618976372,72.82581567764282&key=<API_KEY>. A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'http://domain' is therefore not allowed access.

Answer 1

将标题设置为 null 对我有用。

let url= `https://maps.googleapis.com/maps/api/geocode/json?latlng=${payload.lat},${payload.lng}&key=${process.env.NEXT_PUBLIC_GOOGLE_MAP}`;
 const res = await axios.get(url,{headers:null});

Answer 2

我的系统设置方式是这样的，我的前端是从我的逻辑服务器的跨域提供服务的。 为此，我将我的

withCredentials

标志设置为

true

。由于地图 API 使用

*

通配符，因此

withCredentials

会出错。

为了解决这个问题，我对 Maps 调用使用了单独的 XHR 方法，其中标志设置为 false。

Answer 3

如果您将 firebase 与谷歌云 GOOGLE MAPS SDK javascript 一起使用，则必须执行这些步骤，因为响应不知道您的响应标头：

1- 打开谷歌云控制台。

2-像这样创建一个 cors.json 文件

[
  {
    "origin": ["*"],
    "method": ["GET", "HEAD", "PUT", "POST", "DELETE"],
    "responseHeader": ["Content-Type"],
    "maxAgeSeconds": 3600
  }
]

3-初始化SDK

gcloud init

4- 通过运行安装 gsutil（如果在此过程中尚未安装）：

gcloud components install gsutil

5- 首先，验证您的 Firebase 存储桶名称。您可以在 Firebase 控制台中找到它，通常格式为：your-project-id.appspot.com。

gsutil cors set cors.json gs://your-project-id.appspot.com