2

Mi problema es que estoy usando la API de google maps directions y uso axios para hacer la solicitud, pero cuando ejecuto el codigo me dice que no le estoy pasando el parametro origin pero si se lo estoy pasando, ya lo intente con pasarle el parametro desde un principio en el objeto params pero nada, ya use la url con https y solo con http, estoy haciendo mis pruebas en un localhost. al final pondre el error que me sale.

function directions(origen, destino){
  axios.get('http://maps.googleapis.com/maps/api/directions/json?',{
    params:{
      origin:origen,
      destination:destino,
      key:'mi clave ;)'
    }
  })
  .then(function(response){
    console.log(response)
  })
  .catch(function(error){
    console.log('Ha problemas willies');
  })
}

directions("ecatepec","CDMX")
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Failed to load http://maps.googleapis.com/maps/api/directions/json?&origin=ecatepec&destination=CDMX&key=AIzaSyDmlJky0d55y9q9i7XY9oyIvxJoYfUv5_I: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed

3
  • y si pruebas agregando esto justo después de tu get? headers: { 'Access-Control-Allow-Origin': '*', },
    – user75901
    Commented el 17 mar. 2018 a las 6:02
  • justo antes de params
    – user75901
    Commented el 17 mar. 2018 a las 6:04
  • function directions(origen, destino){ axios.get('http://maps.googleapis.com/maps/api/directions/json?',{ headers: { 'Access-Control-Allow-Origin': '*', }, params:{ origin:origen, destination:destino, key:'AIzaSyDmlJky0d55y9q9i7XY9oyIvxJoYfUv5_I' } }) De esta forma @shadow paz? si si es asi, igual me arroja error
    – ulysses316
    Commented el 17 mar. 2018 a las 6:08

1 respuesta 1

1

Aunque no lo dice en la documentación (al menos la última vez que la leí), ese endpoint de google apis no está pensado para requests desde el front, por el problema de cross origin. Ellos simplemente no tienen habilitado el response header Access-Control-Allow-Origin y no hay mucho que hacer.

Tu request está bien, si cargas directamente https://maps.googleapis.com/maps/api/directions/json?&origin=ecatepec&destination=CDMX&key=AIzaSyDmlJky0d55y9q9i7XY9oyIvxJoYfUv5_I en tu browser, responde bien.

Pero si intentas hacer un request desde el front de tu aplicación, te dirá

Failed to load https://maps.googleapis.com/maps/api/directions/json?&origin=ecatepec&destination=CDMX&key=AIzaSyDmlJky0d55y9q9i7XY9oyIvxJoYfUv5_I: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Solución? Tienes que hacer el request desde el backend.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.