2

explico mi inconveniente: Estoy tratando de consumir una API de una pagina entonces realizo la siguiente petición:

    <script>
    var button = document.getElementById("btn_submit");
    button.addEventListener("click", e => {
        e.preventDefault;
        var vin = document.getElementById("id_vin").value;
        console.log(vin);

        var url = `https://api.mercedes-benz.com/image/v1/vehicles/${vin}/components?apikey=mi_clave`;
        $.ajax({
            url: url,
            type: 'GET',
            accepts: "application/json",
            crossDomain: true,
            success: function (result) {
                // process result
                $('#result').html(result.ip);
            },
            error: function (e) {
                 // log error in browser
                console.log(e.message);
            }
        });
    }) 
</script>

Pero obtengo el siguiente error:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Por lo que leo falta como agregarle la cabecera o algo así es mi primera vez trabajando con AJAX así que me pueden guiar se los agradecería muchísimo.

Saludos :D

ACTUALIZACION.

            var url = `https://api.mercedes-benz.com/image/v1/vehicles/${vin}/components?apikey=xxxx`;
        $.ajax({
            url: url,
            type: 'GET',
            accept: "application/json",
            crossDomain: true,
            dataType: 'jsonp',
            success: function (result) {
                // process result
                $('#result').html(result.ip);
            },
            error: function (e) {
                 // log error in browser
                console.log(e.message);
            }
        });
    }) 

Asi me da el siguiente error:

introducir la descripción de la imagen aquí

Pero si le doy clic al link puedo ver el resultado entonces no se como tratar ese resultado para que lo imprima en la pagina:

introducir la descripción de la imagen aquí

ACTUALIZACION 2

al modificar el dataType: "json"

me sale el siguiente error:

introducir la descripción de la imagen aquí

ACTUALIZACION 3 Envio mi peticion como introducir la descripción de la imagen aquí

Me sale el error: introducir la descripción de la imagen aquí

Y he aca la respuesta de la pestaña Network>Hearders introducir la descripción de la imagen aquí

Este es el preview de la respuesta (lo que quiero) introducir la descripción de la imagen aquí

Y la respuesta en json me parece: introducir la descripción de la imagen aquí

Aclaro que mi pagina la tengo en local es decir no la he subido a ningun servidor , la estoy corriendo desde mi laptop local

4
  • 1
    saludos podrias hacerlo algo asi: headers: { 'x-my-custom-header': 'some value' } el 1 oct. 2018 a las 14:51
  • o tambn: beforeSend: function(xhr) { xhr.setRequestHeader("custom_header", "value"); }, el 1 oct. 2018 a las 14:52
  • Una pregunta: ¿estas corriendo la aplicación de API en la misma IP (De la web) pero distinto puerto? (Por ejemplo tu aplicación web esta corriendo en el 192.168.0.1:8000 y tu API en el 192.168.0.1:8001? el 1 oct. 2018 a las 14:55
  • mi web desde mi pc por ahora pero la otra api no es mia esta en otro dominio
    – Naoto
    el 1 oct. 2018 a las 16:30

3 respuestas 3

2

Habria que ver dos cosas:

  1. debes solicitar una autorizacion como un token, cuando ya lo tienes envias tus token obtenido en las cabecera de la peticion.

  2. habria que ver si la API te permite enviar las credenciales en tus cabeceras en ese caso ya no tienes que enviar un token sino el usuario que te han asigando

var button = document.getElementById("btn_submit");
button.addEventListener("click", e => {
    e.preventDefault;
    var vin = document.getElementById("id_vin").value;
    console.log(vin);

    var url = `https://api.mercedes-benz.com/image/v1/vehicles/${vin}/components?apikey=mi_clave`;
    $.ajax({
        url: url,
        headers: {
        'Authorization':'token'
        type: 'GET',
        accepts: "application/json",
        crossDomain: true,
        success: function (result) {
            // process result
            $('#result').html(result);
        },
        error: function (e) {
             // log error in browser
            console.log(e.message);
        }
    });
}) 
7
1

Lo que tienes es un error de CORS (control de acceso HTTP), porque estás haciendo la petición desde un dominio diferente al que aloja las imágenes. Lo que tienes que hacer es pedir a los que mantienen la API que agreguen tu dominio a la lista de acceso. Como estás trabajando desde un entorno local, eso puede ser más complicado. Ten en cuenta que acceder al punto terminal (endpoint) directamente con el browser no supone un problema de CORS, sino solamente cuando la petición se realiza a través de AJAX, por eso puedes acceder a la URL del endpoint con el navegador, sin problemas.

El control CSRF con token, compo sugieren otros usuarios, se hace solamente para peticiones idempotentes o POST, no para GET.

12
  • Y como hacen los demas para solicitar informacion de una api externa? no creo que siempre uno le tenga que pedir a los creadores de esas api que agreguen mi domio o si ? :O
    – Naoto
    el 2 oct. 2018 a las 14:39
  • Si la API es para uso anónimo (no autenticado), el encabezado Access-Control-Allow-Origin de respuesta debe ser '*'. Pero seguramente, ese no es el caso en la API con la que trabajas. De modo que o autenticas con una cookie de sesión, por ejemplo, o con otro método acordado. developer.mozilla.org/es/docs/Web/HTTP/Headers/…
    – nat
    el 2 oct. 2018 a las 17:41
  • para usarla segun la documentacion solo necesito la api_key que se la envio y ya
    – Naoto
    el 2 oct. 2018 a las 17:55
  • ok, ten cuidado porque has publicado tu API key en un comentario, deberías editarla. He ido a la documentación a ver y pienso que pueden pasar dos cosas. Tu servidor local no está corriendo en protocolo https. Tu API key está equivocada. Intenta hacer la misma petición desde postman a ver qué resultado obtienes. chrome.google.com/webstore/detail/postman/…
    – nat
    el 2 oct. 2018 a las 18:14
  • Uy muchas gracias no me habia fijado jeje estoy añadiendo esa extension a ver y te digo :D gracias
    – Naoto
    el 2 oct. 2018 a las 19:53
0

Agrega a tu peticion el tipo de dato 'jsonp'

dataType: 'jsonp',

tu peticion quedaria de esta manera:

$.ajax({
        url: url,
        type: 'GET',
        accepts: "application/json",
        crossDomain: true,
        dataType: 'jsonp',
        success: function (result) {
            // process result
            $('#result').html(result.ip);
        },
        error: function (e) {
             // log error in browser
            console.log(e.message);
        }
    });

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.