Vue/nuxt3 project : (reason: cors header ‘access-control-allow-origin’ missing). status code: 200

Question

I'm currently using Vue, nuxt3, and javascript for a front project.
My goal right now is to create a function that gets the distance between to city given in the parameters. So I wanted to use the google matrix API.

This is what I've tried to do :

const getDistance = async (town, center) => {
  const response = await fetch(
    `https://maps.googleapis.com/maps/api/distancematrix/json?destinations=${town}&origins=${center}&units=imperial&key=API_KEY`
  );
  const data = await response.json();
  console.log(data);
  return data.rows[0].elements[0].distance.value;
};

But I keep receiving this error on the console:

(reason: cors header ‘access-control-allow-origin’ missing). status code: 200

I've already tried the HTTPS link request on google and that's working, seems like the error doesn't come from my API_KEY or something. Could someone help me?

to make this call in the browser, you need to use the [MAPS javascript API](https://developers.google.com/maps/documentation/javascript) and specifically [this one](https://developers.google.com/maps/documentation/javascript/distancematrix) — Jaromanda X, Nov 03 '22 at 21:16
Hi, did you gave a try to that one? https://stackoverflow.com/q/46522749/8816585 — kissu, Nov 04 '22 at 05:26

score 0 · Answer 1 · answered Nov 03 '22 at 21:13

I think you would be better served using the Google Maps client-side Distance Matrix Service.

I think that direct calls to the distancematrix endpoint are only allowed in server-side code.

See the answer here as I believe it may apply to the issue you are seeing: Google Distance Matrix API returning CORS blockade

score 0 · Answer 2 · answered Nov 03 '22 at 21:16

As CORS is a client side restriction, I believe that this api should be used by the server side. So the right way it to use API that designed for client side. Alternatively you can expose an API in your server that use that API, then call it from the client side.

Vue/nuxt3 project : (reason: cors header ‘access-control-allow-origin’ missing). status code: 200

2 Answers2