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

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?

CodePudding user response：

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

CodePudding user response：

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.