error: потому что его тип MIME ('application / json') не является исполняемым, а строгая проверка типа MIME включена [duplicate]

Отвечено мной.

CORS угловой js + restEasy на POST

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

Итак, я создал путь OPTIONS в моей службе отдыха, который перезаписывает ответ и включает заголовки в ответ с использованием заголовка ответа

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

У меня была аналогичная проблема, и для меня она сводилась к добавлению следующих HTTP-заголовков в ответ на принимающий конец:

Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Origin: *

Вы можете не использовать * на end, но только имя домена хоста, отправляющего данные. Как *.example.com

Но это возможно только при наличии доступа к конфигурации сервера.

Эта проблема возникает из-за политики модели безопасности веб-приложений, которая является политикой одинакового происхождения. В соответствии с политикой веб-браузер позволяет сценариям, содержащимся на первой веб-странице, получать доступ к данным на второй веб-странице, но только если обе веб-страницы имеют такой же происхождение. Это означает, что реквестер должен соответствовать точному хосту, протоколу и порту запрашивающего сайта.

У нас есть несколько вариантов, чтобы справиться с этой проблемой заголовка CORS.

1. Использование прокси-сервера это решение мы будем запускать прокси-сервер таким образом, что когда запрос будет проходить через прокси-сервер, он появится, как будто он имеет такое же происхождение. Если вы используете nodeJS, вы можете использовать cors-где-нибудь, чтобы сделать прокси-материал. 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 - это метод для отправки данных JSON, не беспокоясь о проблемах с междоменью. Он не использует объект XMLHttpRequest. Вместо этого используется тег <script>. https://www.w3schools.com/js/js_json_jsonp.asp
3. Сторона сервера. На стороне сервера нам нужно включить запросы с кросс-началом. Сначала мы получим Запросы с предварительным освещением (ОПЦИИ), и нам нужно разрешить запрос, который является кодом состояния 200 (ok). Предварительно запрошенные запросы сначала отправляют заголовок запроса HTTP OPTIONS на ресурс в другом домене, чтобы определить, безопасно ли отправлять этот запрос. Запросы межсайтовых запросов предваряются таким образом, поскольку они могут иметь последствия для пользовательских данных. В частности, запрос предваряется, если он использует методы, отличные от GET или POST. Кроме того, если POST используется для отправки данных запроса с помощью Content-Type, отличного от application / x-www-form-urlencoded, multipart / form-data или text / plain, например. если запрос POST отправляет XML-полезную нагрузку на сервер с помощью приложения / 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("*");
           }
       };
   }
   

   } Если вы используете защиту от пружины ниже кода вместе с приведенным выше кодом. @Configuration @EnableWebSecurity public class SupplierSecurityConfig расширяет WebSecurityConfigurerAdapter {

   @Override
   protected void configure(HttpSecurity http) throws Exception {
       http.csrf().disable().authorizeRequests().antMatchers(HttpMethod.OPTIONS, "/**").permitAll().antMatchers("/**").authenticated().and()
               .httpBasic();
   }
   

   }

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

Попробуйте использовать службу ресурсов для использования 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>