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で使用すると、次の図のように通常どおりデータを取得しました。
しかし、axiosを使用してnuxtで使用すると、次のようなエラーが発生します。
要求されたリソースに「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));
私を助けてください。ありがとうございました!!!
nuxt.config.js
、CORSワイルドカードを許可するには、資格情報を入力する必要があります:false。
次のように構成を変更します。
axios: {
baseURL: 'https://maps.googleapis.com/maps/api',
proxyHeaders: false,
credentials: false
}
CORSヘッダーは、サーバーサイドアプリケーションで使用するように設計されているため、Googleマップからの応答には含まれていません。クライアント側(ブラウザ)の場合は、 公式マップライブラリ を利用する必要があります。 (上の画像に表示されています)。
参照: https://github.com/nuxt-community/axios-module#credentials