Как включить CORS в AngularJs

у меня была аналогичная проблема, и для меня она сводилась к добавлению следующих заголовков 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 вопрос.

1. Использование Прокси-Сервера - в этом решении мы запустим прокси-сервер таким образом, что когда запрос проходит через прокси-сервер, он будет выглядеть так, как будто это одно и то же происхождение. Если вы используете 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);
   });
   

2. JSONP - JSONP является a метод для отправки данных в формате JSON, не беспокоясь о кросс-доменные вопросы.Он не использует объект XMLHttpRequest.Он использует - тег. https://www.w3schools.com/js/js_json_jsonp.asp

3. На Стороне Сервера - на стороне сервера нам нужно включить перекрестные запросы. Сначала мы получим предварительно освещенные запросы( параметры), и нам нужно разрешить запрос, который является кодом состояния 200 (ОК).

   Preflighted просит сначала отправить параметры заголовке HTTP-запроса к ресурсу на другом домене, для того чтобы определить, является ли фактический запрос является безопасным, чтобы отправить. Межсайтовые запросы предварительно подсвечиваются таким образом, поскольку они могут иметь последствия для пользовательских данных. В частности, запрос предварительно освещается, если он использует методы, отличные от 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 security используйте ниже код вместе с вышеуказанным кодом.

   @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 angular js + restEasy на посту

Ну наконец-то я пришел к этому обходному пути: Причина, по которой он работал с IE, заключается в том, что IE отправляет непосредственно сообщение, а не сначала предварительный запрос на запрос разрешения. Но я все еще не знаю, почему фильтр не смог управлять запросом опций и отправляет по умолчанию заголовки, которые не описаны в фильтре (похоже, переопределение для этого единственного случая ... может быть, рестайлинг вещь ...)

поэтому я создал путь опций в моей службе rest, который перезаписывает ответ и включает заголовки в ответ с помощью заголовка ответа

Я все еще ищу чистый способ сделать это, если кто-то столкнулся с этим раньше.

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