5

In my Nuxt project, I use vue2-google-maps library to create map and axios to get data from Map API. I want to get distance between 2 location in google map, so i use Directions API: https://maps.googleapis.com/maps/api/directions/json?origin=Disneyland&destination=Universal+Studios+Hollywood&key=API_KEY. When I use it with Insomnia, I retrieved data normally, like below picture:

enter image description here

But when i use it with nuxt using axios, I get some error like:

enter image description here

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

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 type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.

But if i use Geocoding API with nuxt, it work normally I tried adding header Access-Control-Allow-Origin=* but still get errors. I don’t know why i get these errors. My code:

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));

Please help me. Thank you!!!

Derek Pollard
  • 6,953
  • 6
  • 39
  • 59
Michael
  • 1,806
  • 2
  • 11
  • 20

1 Answers1

5

In nuxt.config.js, you have to put credentials: false to allow CORS wildcard.

Modify config as follows.

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

enter image description here

CORS header is not present in the response from Google Maps because it is designed to be utilized for server-side applications. For client-side (Browser), you need to make use of Official Maps library. (Shown in the above image).

Reference: https://github.com/nuxt-community/axios-module#credentials

Bharathvaj Ganesan
  • 3,054
  • 1
  • 18
  • 32
  • I tried your guide like: in my nuxt.config.js: modules: [ '@nuxtjs/axios', ], axios: { baseURL: ' https://maps.googleapis.com/maps/api ', proxyHeaders: false, credentials: false }, But i still got these errors – Michael Sep 01 '18 at 04:47
  • @NguyễnVănĐại See google maps API you are using is a Server side API. That's why `Access-Control-Allow-Origin` header is not present.You need to make use of [client-side JS library](https://developers.google.com/maps/documentation/javascript/directions) – Bharathvaj Ganesan Sep 01 '18 at 04:56
  • Do mark the answer verified if this solves your problem. Cheers – Bharathvaj Ganesan Sep 01 '18 at 05:00
  • But why i use Geocoding API with axios in Nuxt, it work normally @Bharathvaj Ganesan – Michael Sep 04 '18 at 00:37
  • It looks like this API is been hit only on the client side i.e browser. It should have been hit on the server side before serving to the browser. – Bharathvaj Ganesan Sep 04 '18 at 04:47
  • Thank you. I use DirectionsService, and that fixed my problem. This is the link for my question: https://github.com/xkjyeah/vue-google-maps/issues/174 – Michael Sep 04 '18 at 23:23