Я не могу выполнить запрос, который должен установить заголовок с помощью axios

Question

Я пытаюсь получить некоторые данные из внешнего API (из Mashape), для которого требуется определенный заголовок для установки ключа API.

Все в порядке с помощью 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"); 
 
    } 
 
});

Однако, когда я пытаюсь сделать то же запрос с Аксиосами для среагировать приложения, у меня есть ошибки 404:

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

Есть ли что-то, что мне не хватает? Благодарю.

Answer 1

Try также, чтобы сделать это, как это без установки по умолчанию:

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); 
     }); 
    } 

Он должен работать.

PS Я также заметил, что вы используете разные соответствующие заголовки (разрешение X-Mashape) и ответ (X-Mashape-Key). Возможно, это также связано с ошибкой 404?

Answer 2

Я, наконец, понял.

Нам нужно установить заголовок ДО запроса с помощью axios.defaults.headers.common['header_name'] = "API_KEY";:

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

У меня есть лучший способ решить эту проблему.

Вам просто нужно добавить формат параметров из Аксиос, как это показано ниже:

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));