Здравствуйте!
Делаю приложение на AngularJS. Столкнулся с проблемой CORS при попытке использовать Angular-UI Typeahead и подгрузкой городов из api google map.
Есть следующий код app.js
.config(
[ '$stateProvider', '$urlRouterProvider', '$controllerProvider', '$compileProvider', '$filterProvider', '$provide', '$httpProvider',
function ($stateProvider, $urlRouterProvider, $controllerProvider, $compileProvider, $filterProvider, $provide, $httpProvider) {
// lazy controller, directive and service
app.controller = $controllerProvider.register;
app.directive = $compileProvider.directive;
app.filter = $filterProvider.register;
app.factory = $provide.factory;
app.service = $provide.service;
app.constant = $provide.constant;
app.value = $provide.value;
$httpProvider.interceptors.push('TokenInterceptor');
//
service.js
.factory('TokenInterceptor', function ($q, $window, $location, AuthenticationService) {
return {
request: function (config) {
config.headers = config.headers || {};
if ($window.sessionStorage.token) {
config.headers.Authorization = 'Bearer ' + $window.sessionStorage.token;
}
return config;
},
requestError: function(rejection) {
return $q.reject(rejection);
},
/* Set Authentication.isAuthenticated to true if 200 received */
response: function (response) {
if (response != null && response.status == 200 && $window.sessionStorage.token && !AuthenticationService.isAuthenticated) {
AuthenticationService.isAuthenticated = true;
}
return response || $q.when(response);
},
/* Revoke client authentication if 401 is received */
responseError: function(rejection) {
if (rejection != null && rejection.status === 401 && ($window.sessionStorage.token || AuthenticationService.isAuthenticated)) {
delete $window.sessionStorage.token;
AuthenticationService.isAuthenticated = false;
$location.path("/access/login");
}
return $q.reject(rejection);
}
};
})
Все работает авторизация, токен - все хорошо, ходим по всем вкладкам приложения - все замечательно. Но не работает такая штука в форме как Typeahead выводит ошибку в консоли:
Запрос из постороннего источника заблокирован: Политика одного источника запрещает чтение удаленного ресурса на http://maps.googleapis.com/maps/api/geocode/json?a... Это может быть исправлено путем перемещения ресурса в тот же домен или включением CORS.
template.html
<div class="form-group">
<label>Местоположение</label>
<div class="pos-rlt" ng-controller="TypeaheadLocationCtrl">
<i ng-show="loadingLocations" class="fa fa-spinner fa-spin form-control-spin"></i>
<input type="text" ng-model="userinfo.location" placeholder="Введите первые буквы названия местоположения" typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations" class="form-control">
</div>
</div>
controller.js
// TypeaheadLocation
.controller('TypeaheadLocationCtrl', ['$scope', '$http', function($scope, $http) {
$scope.selected = undefined;
// Any function returning a promise object can be used to load values asynchronously
$scope.getLocation = function(val) {
return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {
params: {
address: val,
sensor: false
}
}).then(function(res){
var addresses = [];
angular.forEach(res.data.results, function(item){
addresses.push(item.formatted_address);
});
return addresses;
});
};
}])
Но стоит убрать в app.js $httpProvider как Typeahead начинает работать подставлять города при наборе - все хорошо, но не работает авторизация идентификация пользователя. Все, никуда зайти нельзя - ошибка авторизации.
Не могу понять в чем дело, что нужно изменить или что использовать, чтобы все работало и авторизация и подбор города. Гуглил и яндексил - не нашел.
Понятно что $httpProvider, но как это исправить? Это пробовал:
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
не работает.
Прошу помощи. Спасибо.
Средний
Средний
