0

Angular 1.0.5 で Yeoman スキャフォールディングを使用して ng-resource 経由で POST を使用すると問題が発生します。localhost でフロントエンドを実行し、Azure でホストされている asp.net Web API を使用しています。Web API で CORS 処理を実行し、POST を管理しましたが、Allow-Cross-Origin エラーが引き続き発生します。そして、データベース内のデータを見ることができます。これに続いて GET エラーが発生します。

したがって、問題は次のようになります。これはフロントエンドの問題だと思いますか、それともバックエンドの問題だと思いますか。説明のためのいくつかのコードスニペット:

サービス

angular.module('jellybeanApp.Service', ['ngResource'])
  .factory('PeopleServices', function ($http, $rootScope, $resource, $routeParams, $location) {
    return {
      users : function() {
        var ret =  $resource('http://verkvaki.azurewebsites.net/api/user/:UserId',
          {callback: 'JSON_CALLBACK'},
          {
            get: {method: 'JSONP', params: {UserId: $routeParams.UserId}},
            query: {method: 'JSONP'},
            create: {method: 'POST'}
          });
        return ret;
      }
    }
  });

コントローラー

 'use strict';

angular.module('jellybeanApp')
  .controller('PeopleCtrl', function ($scope, PeopleServices) {
    $scope.userResult = PeopleServices.users().query();

  })
  .controller('EditPeopleController', function ($scope, PeopleServices, $routeParams) {
    var UserId = $routeParams.UserId;
    $scope.result = PeopleServices.users().get();
  })
  .controller('CreatePeopleCtrl', function ($scope, PeopleServices, $location) {
    $scope.newUser = {
      Username : 'Notendanafn',
      Password : 'Lykilorð',
      FirstName : 'Fornafn',
      LastName : 'Eftirnafn',
      Ssn : 'Kennitala',
      Email : 'Tölvupóstfang',
      Phone : 'Símanúmer',
      Roles : 'Stjornandi',
      JobTitle : 'Starfstitill',
      IsActive : true
    };

    $scope.savePeople = function (data) {
      PeopleServices.postit(data);

    };

app.js

'use strict';
    var app = angular.module('jellybeanApp', ['jellybeanApp.Service'])
      .config(function ($routeProvider, $locationProvider) {
        $locationProvider.html5Mode(true);

        $routeProvider
          .when('/', {
            templateUrl: 'views/main.html',
            controller: 'main'
          })
          .when('/people/new', {
            controller: 'CreatePeopleCtrl',
            templateUrl: '../views/newPeople.html'
          })
          .otherwise({
            redirectTo: '/'
          });
      });

POST の後、これは URL バーに発生しますhttp://localhost:9000/people/people :http://localhost:9000/people

そしてChromeコンソールのこのエラー:GET http://verkvaki.azurewebsites.net/api/user/people?callback=angular.callbacks._2 400 (Bad Request)

API の POST へのルートは /user のみにする必要があるため、そこにある people 属性も驚くべきものです。

そして最後に、azure がホストする API への URL : http://verkvaki.azurewebsites.net/api/user

何かご意見は？

4

1 に答える 1

0

久しぶりに解決。コードで CorsHandler を使用し、XHR スクリプトを操作し、web.config を使用してクロスオリジン リクエストを許可していたことが判明しました。そのため、[POST] を実行している間、構成では許可されていましたが、ハンドラーが混乱しました。CorsHandler を削除し、使用するだけで当時は解決しました

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
  </customHeaders>
</httpProtocol>

web.config の部分。

もちろん、Web API 2 では、Microsoft.AspNet.WebApi.Cors を使用するだけです。

于 2014-10-27T09:25:14.190 に答える