AngularJS CORSの問題 質問する

AngularJS CORSの問題 質問する

私は、AngularJS で cors を処理する方法について、200 以上のサイトを検索しました (誇張かもしれませんが、それほどではありません)。Web API サーバーを実行しているローカル マシンがあります。API でデータを呼び出すクライアントを開発しています。サーバーからクライアントを実行すると、問題なくデータを受信します。別のドメインから実行すると、データを取得しようとすると赤い 200 応答が返され、応答は空白になります。次にコードを示します。

var myApp = angular.module('Project', ['ngResource']);

myApp.config(function($routeProvider){
    $routeProvider.
        when('/new', {templateUrl:'templates/new.html', controller:'EditProjectController'}).
        when('/mobile', {templateUrl:'templates/mobile.html', controller:'ProjectController'}).
        when('/it', {templateUrl:'templates/it.html', controller:'ProjectController'}).
        when('/writing', {templateUrl:'templates/writing.html', controller:'ProjectController'}).
        when('/all', { templateUrl: 'templates/all.html' }).
        when('/login', { templateUrl: 'partials/_login.html' }).
        otherwise({ redirectTo: '/all' });
});
myApp.config(['$httpProvider', function ($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}
]);



myApp.controller('ProjectController', 
function myApp($scope, $http, projectDataService, userLoginService) {
    $http.defaults.useXDomain = true;
    $scope.loadProject = function(){
        projectDataService.getProject(function(project){
            $scope.project = project;
            })


    };
    $scope.loadProject();
}

);

myApp.factory('projectDataService', function ($resource, $q) {
var resource = $resource('http://webapiserver/api/:id', { id: '@id' });
return {
    getProject: function () {
        var deferred = $q.defer();
        resource.query({ id: 'project' },
            function (project) {
                deferred.resolve(project);
            },
            function (response) {
                deferred.reject(response);
            });

        return deferred.promise;
    },
    save: function (project) {
        var deferred = $q.defer();
        project.id = 'project/9';
        resource.save(project,
            function (response) { deferred.resolve(response); },
            function (response) { deferred.reject(response); }
            );
        return deferred.promise;
    }
};
});

$http を使用してこれを試してみましたが、同じ応答(または応答がない)が返されました。

myApp.factory("projectDataService", function ($http) {

return {
    getProject: function (successcb) {
        $http.get("http://webapiserver/api/project").
        success(function (data, status, headers, config) {
            successcb(data);
        }).
        error(function (data, status, headers, config) {

    }
};
});

ブラウザで json を提供している URL を参照するだけで、データが吐き出されます。サーバーでは、前のステートメントで明らかなように、クロスドメイン オリジンを許可しています。ご覧のとおり、ヘッダーのオーバーライドを myApp.config に実装しています。コントローラーに直接配置してみましたが、違いはありませんでした...

このタスクに3日かかりました。

これに関してご協力いただければ大変ありがたいです。よろしくお願いします。

ベストアンサー1

Web API を少し変更する必要があるかもしれません。私も同じような問題に遭遇したので、この問題を解決する方法について記事を書きました。

私は API に Sinatra を使用しました。Web サービスにどの言語を使用しているかはわかりませんが、適用できると思います。基本的には、どのオリジンとどの HTTP メソッドが許可されるかを定義して、CORS 呼び出しを受け入れるようにサーバーを構成する必要があります。

サーバー上ですでに有効にしているとおっしゃいましたが、具体的に何をしましたか?

詳細についてはこの投稿をご覧ください:angular.js を使用した CORS

おすすめ記事