1

我正在嘗試增加該項目中公共藝術作品的照片集,我正在使用Google Places API中的照片進行處理。它說here,您可以發送詳細信息請求,以獲得10張照片的數組。最終,我將解壓縮每個照片的谷歌photo reference的響應,併爲陣列中的每張照片發出請求並顯示它。向Google Places API發送詳細請求 - (CORS錯誤)

不幸的是,當我發送我的詳細信息請求時,此計劃中斷。這是我得到的確切的錯誤:

Fetch API cannot load https://maps.googleapis.com/maps/api/place/details/json?placeid=ChIJ5zf5lfXKRIYR8rPafbwaL68&key=MY_API_KEY. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:4040' is therefore not allowed access. 
If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. 

我從我的本地主機運行這個,我很確定這件事。我所有其他的API調用(Google Maps API和其他一些API調用)都是這樣寫的,所以我有點困惑爲什麼我會得到這個錯誤。這裏是相關的代碼:

The actual API call: 

export function getPhotos(placeID) { 
    let obj = { 
    method: 'GET' 
    }; 
    return fetch('https://maps.googleapis.com/maps/api/place/details/json?placeid=' + placeID + '&key=MY_API_KEY') 
    .then((response) => { 
     if (response.status >= 400){ 
     throw new Error("Error getting photos for placeID: " + placeID) 
     } 
     return response.json() 
    }) 
} 

讓我知道如果您需要任何其他信息,我很樂意提供它。謝謝!

回答

1

您需要使用server side proxy來防止此錯誤。它在你直接訪問url時起作用,因爲當你這樣做的時候你沒有出處。

  • JS AJAX請求到本地服務器 - >遠程服務器,請求接收響應中發送,遠程服務器 - >本地服務器 - > AJAX請求JS。

選中此相關的SO問題:

您可以修改API服務器,以便CORS is enabled,或跟隨下的「instructions on the webpack-dev-server頁結合現有服務器「將資產服務與webpack-dev-se相結合rver和你自己的API服務器。

希望這有助於!

1

previous answer建議使用服務器端代理。雖然對於訪問不支持CORS或JSONP的Web API的一般情況而言,這是一個很好的解決方案,但它不是解決此特定問題的最佳解決方案。

取而代之的是使用Google專門爲此類用途設計的JavaScript Places Library。該頁面頂部的鏈接提供了額外的樣本,指南和參考資料。

相關問題