Я создал демонстрационную версию с использованием JavaScript для API поиска фотографий Flickr. Сейчас я конвертирую его в AngularJ. Я искал в интернете и нашел ниже конфигурацию.

Конфигурация:

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

Контроллер:

myApp.controller('flickrController', function($scope, dataService) {
        $scope.data = null;
        dataService.flickrPhotoSearch().then(function(dataResponse) {
            $scope.data = dataResponse;
            console.log($scope.data);
        });
    });

, но все же я получил ту же ошибку. Вот некоторые ссылки, которые я пробовал:

XMLHttpRequest не может загрузить URL. Источник доступа не разрешен Access-Control-Allow-Origin

http://samurails.com/tutorial/cors-with-angular-js-and-sinatra/

Мы только что выпустили

Я создал прокси-сервер в node.js по предложению @Quentin:

var http = require('http');
var url = require('url');
var fs = require('fs');
var server;

server = http.createServer(function (req, res) {
    // your normal server code
    var path = url.parse(req.url).pathname;
    fs.readFile(__dirname   path, function (err, data) {
        if (err) {
            return send404(res);
        }
        res.writeHead(200, {'Content-Type':path == 'json.js' ? 'text/javascript' : 'text/html'});
        res.write(data, 'utf8');
        res.end();
    });
}),
server.listen(8001);
//using express to load customizes static files
var express = require("express"),
    app = express();

app.all("/api/*", function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With");
    res.header("Access-Control-Allow-Methods", "GET, PUT, POST");
    return next();
});
app.use("/js", express.static(__dirname   '/js'));
app.listen(3001);

Окончательное редактирование

. Результат будет опубликован во фрейме, а затем вы можете просто отправить извлеченные данные до нужного уровня тега изображения, например:

headers: {'Authorization': 'Token token=xxxxYYYYZzzz'}

, и она работает нормально. Я получил то, что хотел. Спасибо всем за участие в этом вопросе

возвращается.

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

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

. Есть ли разница между * метод A) обработчик одного события *.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' });
});

Template:

<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. Используя Proxy — В Это решение, мы запустим прокси-сервер таким образом, чтобы при прохождении запроса через прокси-сервер он выглядел так, как будто он того же происхождения. Если вы используете nodeJS , вы можете использовать cors -where выполнения прокси. 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 (хорошо). { *} Вы можете использовать

    Предварительно просвечиваемые запросы сначала отправляют заголовок запроса HTTP OPTIONS на ресурс в другом домене, чтобы определить, безопасен ли фактический запрос для отправки. Межсайтовые запросы предварительно просвечиваются как Это связано с тем, что они могут иметь значение для пользовательских данных. В частности, запрос предварительно просвечивается, если он использует методы, отличные от GET или POST. Кроме того, если POST используется для отправки данных запроса с Content-Type, отличным от application / x-www- form-urlencoded, multipart / form-data или text / plain, например, если запрос POST отправляет полезную нагрузку XML на сервер с помощью application / xml или text / xml, тогда запрос предварительно просвечивается. Он задает пользовательские заголовки в запросе ( например, в запросе используется заголовок, такой как X-PINGOTHER)

    Если вы используете да, Scrapy может удалять динамические веб-сайты, веб-сайты, которые отображаются через Java-script. просто добавьте приведенный ниже код, чтобы решить проблему. Здесь я отключил токен 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();
        }
    
    }
    

Ответил сам.

Сначала при попытке подключить события таким образом

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

и тест пуст … Я уже пробовал разные способы написания, но я думаю, что я неправильно понял возможности JS?

объект несколько раз вместо клонирования экземпляра объекта:

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

Apache / HTTPD, обычно встречается на большинстве предприятий или если вы используете Centos / etc дома. Так что, если у вас это есть, вы можете очень легко создать прокси, чтобы добавить необходимые заголовки CORS.

у меня есть запись в блоге на этом {* } 1.Связать функцию события в самом конструкторе следующим образом: говорится, что , поскольку я страдал с этим довольно много раз в последнее время. Но важный момент — это просто добавить это в файл /etc/httpd/conf/httpd.conf и убедиться, что вы уже выполняете «Listen 80»:

<VirtualHost *:80>
    <LocationMatch "/SomePath">
       ProxyPass http://target-ip:8080/SomePath
       Header add "Access-Control-Allow-Origin" "*"
    </LocationMatch>
</VirtualHost>

. Это гарантирует, что все запросы к URL-адресам по вашему-server-ip: 80 / SomePath направляются в http: // target-ip: 8080 / SomePath (API без поддержки CORS) и что они возвращаются с правильным заголовком Access-Control-Allow-Origin, чтобы позволить им работать с вашим веб-приложением.

Конечно, вы можете изменить порты и настроить таргетинг на весь сервер, а не SomePath, если хотите.

мы можем включить CORS во внешнем интерфейсе с помощью модуля ngResourse. Но самое главное, у нас должен быть этот кусок кода при выполнении запроса ajax в контроллере,

$scope.weatherAPI = $resource(YOUR API,
     {callback: "JSON_CALLBACK"}, {get: {method: 'JSONP'}});
 $scope.weatherResult = $scope.weatherAPI.get(YOUR REQUEST DATA, if any);

Кроме того, вы должны добавить ngResourse CDN в части скрипта и добавить в качестве зависимости в модуль приложения.

<script src="https://code.angularjs.org/1.2.16/angular-resource.js"></script>

Затем используйте «ngResourse» в разделе зависимостей модуля приложения

var routerApp = angular.module("routerApp", ["ui.router", 'ngResource']);