【Google Place API】has been blocked by CORS policyで弾かれてしまいます

Question

請求先アカウントを作りプロジェクトと紐付けも行ってます、APIも有効化しリクエストしたところ下記のエラーになります。

エラー分
Access to XMLHttpRequest at （Google_API_URL）from origin （自分のURL） has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource

Access-Control-Allow-Originをヘッダーに付与するという対応を拝見したのでやってみたところうまくいかず、そもそもサーバーサイドからフロントに送る場合につけるヘッダーなので関係ありませんでした。

axios
  .get(
    'https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8670522,151.1957362&radius=500&types=food&name=harbour&key=YOUR_API_KEY'
  )
  .then((response) => {
    console.log(response.data)
    // setPost(response.data)
  })
  .catch((error) => {
    console.log(error)
  })

【追記】ブラウザで直接叩くとjsonが表示されました。

Comments

[hoshi-takanori]

Google Places API は CORS 対応してない (つまりブラウザ上の JS で使うことは想定されてない) ようですね。
https://stackoverflow.com/questions/42180788/how-to-use-cors-to-implement-javascript-google-places-api-request

Answer 1

JavaScript用のライブラリがあるので、そちらを使ってみてはいかがでしょうか。

Comments

[nakamu]

ありがとうございます、使ってみます！