web-dev-qa-db-ja.com

Nuxtjsでaxiosを使用してDirectionsAPIからデータを取得する場合のクロスオリジンリードブロッキング（CORB）

Nuxtプロジェクトでは、vue2-google-mapsライブラリを使用してマップを作成し、axiosを使用してMapAPIからデータを取得します。 Googleマップの2つの場所の間の距離を取得したいので、Directions APIを使用します： https://maps.googleapis.com/maps/api/directions/json?origin=Disneyland&destination=Universal+Studios+Hollywood&key= API_KEY 。 Insomniaで使用すると、次の図のように通常どおりデータを取得しました。

enter image description here

しかし、axiosを使用してnuxtで使用すると、次のようなエラーが発生します。

enter image description here

要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、オリジン ' http：// localhost：30 'はアクセスを許可されていません。

Cross-Origin Read Blocking（CORB）blocked cross-Origin response https://maps.googleapis.com/maps/api/directions/json?origin=Disneyland&destination=Universal+Studios+Hollywood&key=API_KEY with MIMEタイプapplication/json。詳細については、 https://www.chromestatus.com/feature/5629709824032768 を参照してください。

しかし、nuxtでGeocoding APIを使用すると、正常に機能します。ヘッダーAccess-Control-Allow-Origin = *を追加しようとしましたが、それでもエラーが発生します。なぜこれらのエラーが発生するのかわかりません。私のコード：

axios
  .get('https://maps.googleapis.com/maps/api/directions/json?origin=Disneyland&destination=Universal+Studios+Hollywood&key=API_KEY')
  .then(res => {
      console.log("Res: ");
      console.log(res)
   })
   .catch(err => console.log(err));

私を助けてください。ありがとうございました！！！

ajaxcorsaxiosnuxt.jsvue2-google-maps
5
Eden

nuxt.config.js、CORSワイルドカードを許可するには、資格情報を入力する必要があります：false。

次のように構成を変更します。

axios: {
   baseURL: 'https://maps.googleapis.com/maps/api',
   proxyHeaders: false,
   credentials: false
}

enter image description here

CORSヘッダーは、サーバーサイドアプリケーションで使用するように設計されているため、Googleマップからの応答には含まれていません。クライアント側（ブラウザ）の場合は、 公式マップライブラリ を利用する必要があります。 （上の画像に表示されています）。

参照： https://github.com/nuxt-community/axios-module#credentials

4
Bharathvaj Ganesan