web-dev-qa-db-ja.com

AngularJS CORSの問題

Anglejsで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日間。

これに関するヘルプはありがたいです。前もって感謝します。

javascriptangularjscorsasp.net-web-api
42
Shane

Web APIを少し変更する必要がある場合があります。私は同じ種類の問題に出会い、この問題を修正する方法についての投稿を書きました。

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

あなたはすでにあなたのサーバーでそれを有効にしていると言いましたが、あなたは正確に何をしましたか？

詳細については、この投稿を参照してください： CORS with angular.js

11
T_Dnzt

データを使用してWebApiにPOSTを追加したい場合は、Chromeを動作させるためにもう少し行う必要があります。プリフライトをインターセプトし、許可されたオリジンとしてクライアントのオリジンを含めます。

このためのより良い解決策があれば、この問題に何日も取り組んだ後、私はそれを見つけることができませんでした。最後に、これは私のために働いたものです。

がんばろう...

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Routing;

namespace MashupCoreApiApi
{
    public class WebApiApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            GlobalConfiguration.Configure(WebApiConfig.Register);
        }


        protected void Application_BeginRequest(object sender, EventArgs e)
        {

            if (Context.Request.Path.Contains("api/") && Context.Request.HttpMethod == "OPTIONS")
            {

                Context.Response.AddHeader("Access-Control-Allow-Origin", Context.Request.Headers["Origin"]);
                Context.Response.AddHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
                Context.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST PUT, DELETE, OPTIONS");
                Context.Response.AddHeader("Access-Control-Allow-Credentials", "true");
                Context.Response.End();
            }

        } 

    }
}
2
user3448990

クロスドメインリクエストを処理するには、Web APIを少し変更する必要があります。 Microsoft Asp-Net Server CorsライブラリをWeb Apiプロジェクトに含め、さらにコードレベルの変更をいくつか加えれば、準備は完了です。もっと見るには こちら

あなたのAngular部分はまったく問題ありません。

0
Nitin Rawat

もしそれが ASP.NET WebAPIは、CORSパッケージをインストールし、Webサーバーの起動時にCORSを初期化する必要があります。

パッケージの名前はMicrosoft.OWin.Cors

の中に WebiApiConfig.cs次のようなものを入れます。

var cors = new EnabledCorsAttribute("*", "*", "DataServiceVersion, MaxDataServiceVersion");
config.EnableCors(cors);
0
pinnprophead