Ich kann nicht eine Anfrage, die eine Überschrift mit Axios

Question

setzen muss

Ich versuche, einige Daten von einer externen API (von Mashape) zu bekommen, die einen bestimmten Header benötigt, um den API-Schlüssel zu setzen.

Alles ist in Ordnung, mit jQuery:

$.ajax({ 
 
    url: 'https://omgvamp-hearthstone-v1.p.mashape.com/cardbacks', 
 
    type: 'GET', 
 
    data: {}, 
 
    dataType: 'json', 
 
    success: function(data) { console.dir((data.source)); }, 
 
    error: function(err) { alert(err); }, 
 
    beforeSend: function(xhr) { 
 
    xhr.setRequestHeader("X-Mashape-Authorization", "MY_API_KEY"); 
 
    } 
 
});

aber wenn ich versuche, die gleiche Anfrage mit axios für eine reagieren Anwendung zu tun, ich habe einen Fehler 404:

axios.get({ 
 
    url: 'https://omgvamp-hearthstone-v1.p.mashape.com/cardbacks', 
 
    headers: { 
 
     "X-Mashape-Authorization": "MY_API_KEY" 
 
    } 
 
})

Gibt es etwas, das mir fehlt? Vielen Dank.

Answer 1

auch versuchen, es so ohne Einstellung Standardwerte zu tun:

axios.get('https://omgvamp-hearthstone-v1.p.mashape.com/cardbacks', { 
     headers: { "X-Mashape-Key": "MY_API_KEY" } 
    }) 
     .then((resp) => { 
     console.dir(resp); 

     }) 
     .catch(err => { 
     console.log(err); 
     }); 
    } 

Es sollte funktionieren.

PS Ich habe auch beobachtet, dass Sie verschiedene Header-Schlüssel in Frage (X-Mashape-Authorization) und beantworten (X-Mashape-Key). Vielleicht hängt das auch irgendwie mit 404 Fehler zusammen?

Answer 2

Ich habe endlich verstanden.

Wir müssen den Header, bevor die Anforderung axios.defaults.headers.common['header_name'] = "API_KEY"; mit einzustellen:

axios.defaults.baseURL = 'https://omgvamp-hearthstone-v1.p.mashape.com'; 
axios.defaults.headers.common['X-Mashape-Key'] = "API_KEY"; 
axios.get('/cardbacks') 
    .then((resp) => { 
     console.dir(resp); 
    }); 

Answer 3

Ich habe einen besseren Weg, um das zu lösen.

Sie müssen nur Parameter hinzufügen Format von axios wie dies unter:

axios({ 
 
    method: <method>, 
 
    url: <url>, 
 
    data: <params>, 
 
    headers: { common: <headers> }, 
 
    }) 
 
    .then(response => { 
 
    if (!cb) return { error: 'No callback' }; 
 
    return cb(response); 
 
    }) 
 
    .catch((err) => cb(err.response));