Question

我正在将flickr应用程序集成到我的应用程序中。我收到以下错误：

XMLHttpRequest无法加载https://api/flickr.com/services/rest?api_key=4cd95b5ad05844319ee958bf96ec0150&format=json&method=flickr.photos.search&nojsoncallback=1。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许原点“http://sinch12j12.ads.autodesk.com”访问。响应的HTTP状态代码为400。

以下是客户端代码：

(function() {
'use strict';
angular.module('flickrApp', ['ngMaterial'])
    .config(['$httpProvider', function($httpProvider) {
        $httpProvider.defaults.useXDomain = true;
        delete $httpProvider.defaults.headers.common['X-Requested-With'];
    }])
    .controller('ListController', ['$scope', '$http', function($scope, $http) {
        $scope.results = [];

        $scope.search = function() {
            $http({
                method: 'GET',
                url: 'https://api/flickr.com/services/rest',
                params: {
                    method: 'flickr.photos.search',
                    api_key: '4cd95b5ad05844319ee958bf96ec0150',
                    text: $scope.searchTerm,
                    format: 'json',
                    nojsoncallback: 1
                }
            }).success(function(data) {
                $scope.results = data;
            }).error(function(error) {
                console.log(error);
            });
        }

    }]);
})();

请告诉我如何解决？

Answer 1

您正在尝试向其他服务器（域）发出AJAX请求，但不允许来自其他域的Ajax请求。您的问题有两种解决方案：

编辑远程服务器（function convertArrayToObj(array){ var newObj = {}; array.forEach(function(item, index){ newObj[index] = item; }); return newObj; }标头）的配置以允许来自其他服务器的AJAX请求。我认为这种解决方案在您的情况下是不可行的，因为您无法配置flickr服务器
在服务器中创建代理服务器组件，向您的应用程序公开API。因此，您将向您的 API发出AJAX请求（因为它是同一个域，您将不会遇到跨域请求问题），并且您的服务器将向flickr API发出请求并在你的AJAX电话中回复。

Answer 2

您正在尝试使用AJAX从远程服务器（在本例中为Flickr服务器）中检索某些数据。出于安全原因，除非该文件允许来自远程服务器的AJAX调用，否则不允许对远程服务器上的任何文件进行AJAX调用。在这里，您尝试获取的Flickr文件不允许来自任何其他服务器的AJAX调用，这就是您无法访问该文件中的数据的原因。

如果您还有其他问题，请与我们联系。

访问控制允许原点| AngularJS

2 个答案: