Используя Angular, я пытаюсь передать HTTP-заголовки с запросом "App-Id" и "App-Key" для получения данных из этого API.
Я попытался настроить заголовки следующим образом:
$http.defaults.headers.common["App-Id"] = '5a3d8b8d';
$http.defaults.headers.common["App-Key"] = '738e9aca62e7465446b7be8fe4219ffa';
но я получил Response for preflight is invalid
ошибка.
$http
запрос на основе запроса Чтобы добавить заголовки в запрос $http
для каждого запроса, добавьте их в свойство headers
объекта $http
config.
var xheaders = {};
xheaders["App-Id"] = '5a3d8b8d';
xheaders["App-Key"] = '738e9aca62e7465446b7be8fe4219ffa';
var xurl = 'https://uk.bookingbug.com/api/v1';
var configObj = { method: 'GET',
url: xurl,
headers: xheaders
};
$http(configObj)
.then(function onFulfilled(response) {
console.log(response);
vm.headers = response.config.headers;
vm.data = response.data
}).catch( function onRejection(errorResponse) {
console.log("Error: ", errorResponse.status);
console.log(errorResponse);
vm.error = errorResponse;
})
;
В коде были ошибки перед полетом, потому что он использовал неправильный URL. Правильный базовый URL-адрес - https://uk.bookingbug.com/api/v1
который поддерживает заголовки App-Id
и CORS.
Я не думаю, что это полный ответ на ваш вопрос, но вот что я имею в своем проекте:
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider) {
// code for routes
});
app.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);
Это решает мою проблему с CORS. Если вы хотите сделать другой тип заголовка, вы, вероятно, найдете свой ответ здесь.
Ошибки перед полетом связаны с CORS. Возможно, вам захочется взглянуть на стойку, чтобы включить межсайтовые вызовы api через javascript. Здесь есть ручная настройка: https://gist.github.com/dhoelzgen/cd7126b8652229d32eb4