Question

在使用Yeoman脚手架的Angular 1.0.5中通过ng-resource使用POST时遇到问题。我们正在本地主机上运行前端并使用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后，这会发生在网址栏中：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，因此人们也会感到惊讶。

最后，azure托管API的网址：http://verkvaki.azurewebsites.net/api/user

有什么想法吗？

Answer 1

很久以来解决了。原来我们在代码中使用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。

Asp.net Web Api和AngularJs POST / PUT麻烦

1 个答案: