Question

Gettting below error when trying $http.post from anugular js to asp.net web api

angular.js:10722 OPTIONS //localhost:54681/api/AccessToken/Generate (anonymous function) @ angular.js:10722sendReq @ angular.js:10515serverRequest @ angular.js:10222processQueue @ angular.js:14745(anonymous function) @ angular.js:14761$eval @ angular.js:15989$digest @ angular.js:15800$apply @ angular.js:16097(anonymous function) @ angular-touch.js:477dispatch @ jquery.js:4435elemData.handle @ jquery.js:4121 index.html#/access/signin:1 XMLHttpRequest cannot load

http://localhost:54681/api/AccessToken/Generate. Response for preflight has invalid HTTP status code 404

My web api is running on //localhost:54681/ and my angular application running on //localhost:62319/

1 - Angular $http.post ajax method on //localhost:62319/

/// <reference path="../../../libs/angular/angular/angular.js" />
'use strict';

app.controller('SigninFormController', ['$scope', '$http', '$state', function ($scope, $http, $state) {
    $scope.user = {};
    $scope.authError = null;
    $scope.login = function () {
        debugger;
        $scope.authError = null;
        var data = { UserName: $scope.user.email, Password: $scope.user.password };

        $http.post('http://localhost:54681/api/AccessToken/Generate', data)
        .then(function (response) {
            debugger;
            //if (!response.data.user) {
            //    $scope.authError = 'Email or Password not right';
            //} else {
            //    $state.go('app.dashboard-v1');
            //}
        }, function (x) {
            debugger;
            console.log(x);
            //$scope.authError = 'Server Error';
        });
    };
}]);

2 - Asp.net Web Api controller on //localhost:54681/

[RoutePrefix("api/AccessToken")]
public class AccessTokenController : BaseApiController
{
    #region Properties And Variable Declaration

    private IAccessTokenCurator accessTokenCurator;

    #endregion Properties And Variable Declaration

    #region Constructor

    public AccessTokenController(IAccessTokenCurator accessTokenCurator)
    {
        this.accessTokenCurator = accessTokenCurator;
    }

    #endregion Constructor

    #region Access Token Operation

    [HttpPost]
    [Route("Generate")]
    public async Task<HttpResponseMessage> Generate(UserLogOn userLogOnModel)
    {
        ServiceResponse<string> serviceResponse = null;

        serviceResponse = new ServiceResponse<string>(await accessTokenCurator.Generate(userLogOnModel));

        return Request.CreateResponse<ServiceResponse<string>>(serviceResponse);
    }

    #endregion Access Token Operation
}

3 - UserLogOn class on //localhost:54681/

public class UserLogOn
{
    public string UserName { get; set; }
    public string Password { get; set; }
}

4 - Web.config changes on //localhost:54681/

  <system.webServer>
    <validation validateIntegratedModeConfiguration="false" />
    <handlers>
      <remove name="OPTIONSVerbHandler" />
      <remove name="TRACEVerbHandler" />
      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
    </handlers>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="content-type" />
        <add name="Access-Control-Allow-Credentials" value="true" />
        <add name="Access-Control-Max-Age" value="1000" />
        <add name="Access-Control-Allow-Request-Method" value="GET, POST, PUT, DELETE, OPTIONS" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>

Let me know where I am making mistake(s).

Answer 1

I'm guessing that you are getting blocked by CORS How does Access-Control-Allow-Origin header work?

Make sure to set:

'Access-Control-Allow-Headers' = 'origin, content-type, accept';
'Access-Control-Allow-Origin' = '*';
'Access-Control-Allow-Methods' = 'GET,POST,PUT,HEAD,DELETE,OPTIONS';

Step 1: Make sure your route actually works

You can try a tool called postman.

This will show you if your url route to /localhost:62319/ is working.

Step 2: Test $http.post

$http.post('http://localhost:54681/api/AccessToken/Generate?data=' + 'foo')

Does this method work for you?

Step 3: Check the network tab and show the results

Open up the chrome developer tools and find the network tab. Click on the request and then the response. Is it coming back as 404?

Angular $http.post method not working for asp.net web api

1 个答案: