Javascript Google Maps API fetch（）返回空，但使用浏览器上的URL返回JSON

我正在研究从下面的JSON获取“photo_reference”的方法

{
   "html_attributions" : [],
   "results" : [
      {
         "formatted_address" : "Bandar Seri Begawan, Brunei",
         "geometry" : {
            "location" : {
               "lat" : 4.903052199999999,
               "lng" : 114.939821
            },
            "viewport" : {
               "northeast" : {
                  "lat" : 4.9665412,
                  "lng" : 115.0004731
               },
               "southwest" : {
                  "lat" : 4.845741299999999,
                  "lng" : 114.8757076
               }
            }
         },
         "icon" : "https://maps.gstatic.com/mapfiles/place_api/icons/geocode-71.png",
         "id" : "b4a5514750d9d7b0164125a220f5c111ae391f4d",
         "name" : "Bandar Seri Begawan",
         "photos" : [
            {
               "height" : 1200,
               "html_attributions" : [
                  "\u003ca href=\"https://maps.google.com/maps/contrib/102574123639894598769\"\u003eSharaf Vallappuzha\u003c/a\u003e"
               ],
               "photo_reference" : "CmRaAAAAKwcyWRgvz9w4IVkWulF7RtNl2bThJaCyfWbOI4hf8oQe-FKwLnpTh5VBbz2ZPo-fBusRkySxNZ2Pf2bfKoL_CljuTg4XnCwLfPxZU24ug-MEdilWgA4umy0nQvnmVs0gEhAFrFECNYCJUhZWvsUgEhRQGhSEcO6jK-mFFKpWXQ24TH15pKoZqQ",
               "width" : 1600
            }
         ],
         "place_id" : "ChIJH3MLVLD1IjIRS-i6fMT4rO4",
         "reference" : "ChIJH3MLVLD1IjIRS-i6fMT4rO4",
         "types" : [ "locality", "political" ]
      }
   ],
   "status" : "OK"
}

这是我在浏览器上打开时获得的

但是我的JS代码如下

const targetUrl = `https://maps.googleapis.com/maps/api/place/textsearch/json?query=bandar+seri+begawan&key=API-KEY`;
    fetch(targetUrl, {mode: 'no-cors'})
    .then(response => response.json())
.then(function(response) {
        console.log(response.results.photos.photo_reference)
})
.catch(e => {
  console.log(e);
    })
}

        fetch(targetUrl, {mode: 'no-cors'})
        .then(response => response)
    .then(function(response) {
            console.log(response)
    })
    .catch(e => {
      console.log(e);
        })

并在浏览器控制台中的JSON数据“”错误的第1行第1列获得“SyntaxError:”JSON.parse:数据意外结束

所以我决定用下面的代码删除json（），以获得原始结果

const targetUrl = `https://maps.googleapis.com/maps/api/place/textsearch/json?query=bandar+seri+begawan&key=API-KEY`;
    fetch(targetUrl, {mode: 'no-cors'})
    .then(response => response.json())
.then(function(response) {
        console.log(response.results.photos.photo_reference)
})
.catch(e => {
  console.log(e);
    })
}

        fetch(targetUrl, {mode: 'no-cors'})
        .then(response => response)
    .then(function(response) {
            console.log(response)
    })
    .catch(e => {
      console.log(e);
        })

改为从浏览器控制台获取此错误

Response { type: "opaque", url: "", redirected: false, status: 0, ok: false, statusText: "", headers: Headers, body: null, bodyUsed: false }

fetch（）似乎返回为空。但当URL被键入到浏览器中时，情况并非如此

---

我需要激活或停用谷歌的安全功能吗？如果您对此有任何想法，我们将不胜感激

这不是看到原始响应的方式。使用

.text（）

而不是

.json（）

。另外，除非你在谷歌工作，否则对他们API的no cors请求将失败……感谢Jared的回复。使用

.text（）。所以我不得不使用“no cors”来消除错误。然后你就不能这样做了，谷歌没有为该端点启用cors，你也没有从谷歌的来源打电话。当你直接去那里时，你会得到它，因为它的来源是Google，但是对于一个获取请求，它的来源与它所在的页面相同，所以使用Google Maps Javascript API v3 Places库从浏览器访问该信息或者从服务器使用web服务是有意义的。