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:
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:
ACTUALIZACION 2
al modificar el dataType: "json"
me sale el siguiente error:
ACTUALIZACION 3 Envio mi peticion como
Y he aca la respuesta de la pestaña Network>Hearders
Este es el preview de la respuesta (lo que quiero)
Y la respuesta en json me parece:
Aclaro que mi pagina la tengo en local es decir no la he subido a ningun servidor , la estoy corriendo desde mi laptop local