Как включить CORS в AngularJs
Я создал демо с помощью JavaScript для Flickr photo search API. Теперь я конвертирую его в AngularJs. Я искал в интернете и нашел ниже конфигурации.
конфигурация:
myApp.config(function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
});
сервис:
myApp.service('dataService', function($http) {
delete $http.defaults.headers.common['X-Requested-With'];
this.flickrPhotoSearch = function() {
return $http({
method: 'GET',
url: 'http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=3f807259749363aaa29c76012fa93945&tags=india&format=json&callback=?',
dataType: 'jsonp',
headers: {'Authorization': 'Token token=xxxxYYYYZzzz'}
});
}
});
6 ответов
ты не знаешь. Сервер, на который вы делаете запрос, должен реализовать CORS для предоставления JavaScript с вашего веб-сайта. Ваш JavaScript не может предоставить себе разрешение на доступ к другому сайту.
у меня была аналогичная проблема, и для меня она сводилась к добавлению следующих HTTP-заголовков в ответ на принимающая сторона:
Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Origin: *
вы можете предпочесть не использовать *
в конце, но только имя домена хоста, отправляющего данные. Как *.example.com
но это возможно, только когда у вас есть доступ к конфигурации сервера.
попробуйте использовать службу ресурсов для использования flickr jsonp:
var MyApp = angular.module('MyApp', ['ng', 'ngResource']);
MyApp.factory('flickrPhotos', function ($resource) {
return $resource('http://api.flickr.com/services/feeds/photos_public.gne', { format: 'json', jsoncallback: 'JSON_CALLBACK' }, { 'load': { 'method': 'JSONP' } });
});
MyApp.directive('masonry', function ($parse) {
return {
restrict: 'AC',
link: function (scope, elem, attrs) {
elem.masonry({ itemSelector: '.masonry-item', columnWidth: $parse(attrs.masonry)(scope) });
}
};
});
MyApp.directive('masonryItem', function () {
return {
restrict: 'AC',
link: function (scope, elem, attrs) {
elem.imagesLoaded(function () {
elem.parents('.masonry').masonry('reload');
});
}
};
});
MyApp.controller('MasonryCtrl', function ($scope, flickrPhotos) {
$scope.photos = flickrPhotos.load({ tags: 'dogs' });
});
шаблон:
<div class="masonry: 240;" ng-controller="MasonryCtrl">
<div class="masonry-item" ng-repeat="item in photos.items">
<img ng-src="{{ item.media.m }}" />
</div>
</div>
эта проблема возникает из-за политики модели безопасности веб-приложения, которая Та Же Политика Происхождения в соответствии с политикой веб-браузер разрешает скриптам, содержащимся на первой веб-странице, доступ к данным на второй веб-странице, но только если обе веб-страницы имеют одинаковое происхождение. Это означает, что запрашивающий должен соответствовать точному хосту, протоколу и Порту запрашивающего сайта.
у нас есть несколько вариантов, чтобы прийти этот заголовок CORS вопрос.
-
Использование Прокси-Сервера - в этом решении мы запустим прокси-сервер таким образом, что когда запрос пройдет через прокси-сервер, он будет выглядеть так, как будто он имеет тот же источник. Если вы используете nodeJS можно использовать cors-anywhere чтобы сделать прокси-материал. https://www.npmjs.com/package/cors-anywhere.
пример:-
var host = process.env.HOST || '0.0.0.0'; var port = process.env.PORT || 8080; var cors_proxy = require('cors-anywhere'); cors_proxy.createServer({ originWhitelist: [], // Allow all origins requireHeader: ['origin', 'x-requested-with'], removeHeaders: ['cookie', 'cookie2'] }).listen(port, host, function() { console.log('Running CORS Anywhere on ' + host + ':' + port); });
JSONP - JSONP является способ отправки данных JSON, не беспокоясь о междоменных проблемах.Он не использует объект XMLHttpRequest.Он использует - тег. https://www.w3schools.com/js/js_json_jsonp.asp
-
Сервер - на стороне сервера нам нужно включить запросы перекрестного происхождения. Сначала мы получим предварительные запросы (опции), и нам нужно разрешить запрос, который является кодом состояния 200 (ok).
Preflighted запросы сначала отправляют заголовок запроса HTTP OPTIONS ресурсу в другом домене, чтобы определить, безопасен ли фактический запрос для отправки. Межсайтовые запросы предварительно освещаются таким образом, поскольку они могут иметь последствия для пользовательских данных. В частности, запрос предварительно освещается, если он использует методы, отличные от GET или POST. Кроме того, если POST используется для отправки данных запроса с типом контента, отличным от application / x-www-form-urlencoded, multipart / form-data или text/ plain, например, если POST запрос отправляет полезную нагрузку XML на сервер с помощью application/xml или text / xml, затем запрос предварительно подсвечивается. Он устанавливает пользовательские заголовки в запросе (например, запрос использует заголовок, такой как X-PINGOTHER)
если вы используете весна просто добавление кода ниже решит проблему. Здесь я отключил токен csrf, который не имеет значения, включает / отключает в соответствии с вашим требованием.
@SpringBootApplication public class SupplierServicesApplication { public static void main(String[] args) { SpringApplication.run(SupplierServicesApplication.class, args); } @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurerAdapter() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**").allowedOrigins("*"); } }; } }
если вы используете использование безопасности spring ниже кода вместе с вышеуказанным кодом.
@Configuration @EnableWebSecurity public class SupplierSecurityConfig extends WebSecurityConfigurerAdapter { @Override protected void configure(HttpSecurity http) throws Exception { http.csrf().disable().authorizeRequests().antMatchers(HttpMethod.OPTIONS, "/**").permitAll().antMatchers("/**").authenticated().and() .httpBasic(); } }
ответил сам.
CORS угловой js + restEasy на пост
Ну, наконец, я пришел к этому обходному пути: Причина, по которой он работал с IE, заключается в том, что IE отправляет непосредственно сообщение, а не первый запрос предполетного запроса для запроса разрешения. Но я все еще не знаю, почему фильтр не смог управлять запросом параметров и отправляет заголовки по умолчанию, которые не описаны в фильтре (похоже, переопределение для этого единственного случая ... может быть, restEasy вещь ...)
поэтому я создал путь опций в моей службе rest, который перезаписывает reponse и включает заголовки в ответ, используя заголовок ответа
Я все еще ищу чистый способ сделать это, если кто-то столкнулся с этим раньше.
var result=[];
var app = angular.module('app', []);
app.controller('myCtrl', function ($scope, $http) {
var url="";// your request url
var request={};// your request parameters
var headers = {
// 'Authorization': 'Basic ' + btoa(username + ":" + password),
'Access-Control-Allow-Origin': true,
'Content-Type': 'application/json; charset=utf-8',
"X-Requested-With": "XMLHttpRequest"
}
$http.post(url, request, {
headers
})
.then(function Success(response) {
result.push(response.data);
$scope.Data = result;
},
function Error(response) {
result.push(response.data);
$scope.Data = result;
console.log(response.statusText + " " + response.status)
});
});
And also add following code in your WebApiConfig file
var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);