0

我们在使用 Yeoman 脚手架的 Angular 1.0.5 中通过 ng-resource 使用 POST 时遇到问题。我们在 localhost 上运行前端并使用 Azure 托管的 asp.net web api。我们已经在 web api 中完成了 CORS 处理，并设法发布，但仍然收到 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);

    };

应用程序.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 回答