Failed to load resource: the server responded with a status of 405 (Method Not Allowed) from Angularjs to WebApi

Question

I am using AngularJS to call my webAPI and getting below error...

Failed to load resource: the server responded with a status of 405 (Method Not Allowed) http://localhost:52240/api/PcpEnvironment/
XMLHttpRequest cannot load http://localhost:52240/api/PcpEnvironment/. Invalid HTTP status code 405 

Here is my call to webapi...

    angular.module('PcPortal')

.controller('UpdateEnvironmentController', UpdateEnvironmentController);

UpdateEnvironmentController.$inject = ['$scope', '$http', '$rootScope'];

function UpdateEnvironmentController($scope, $rootScope, $http) {

    $scope.selectedEnv = $rootScope.selectedEnv;

    $scope.updateEnv = function () {
        alert('Updating env');
        var envData = angular.toJson($rootScope.selectedEnv);

        var config = {
            method: 'POST',
            url: 'http://localhost:52240/api/PcpEnvironment/Post/',
            headers: {
                "Content-Type": "application/json"
            },
            data: { env: envData }
        };

        $http(config)
            .then(function successCallback(response) {
                alert(response);
            },
                function errorCallback(response) {
                    alert('Failed: ' + response);
                });

    }
};

WebApI method...

 [HttpPost]
        public bool Post(PcpEnvironment env)
        {
            return _service.UpdateEnvironment(env);
        }

in my webapiconfig file... I have added below,...

System.Web.Http.GlobalConfiguration.Configuration.Formatters.XmlFormatter.SupportedMediaTypes.Clear();
            config.Formatters.Insert(0, new System.Net.Http.Formatting.JsonMediaTypeFormatter());

f I remove one $http ... my bindings stop working... and for var webadmin = angular.module('PcPortal',[]); I have separate bootstrap file to do that... here I am just getting the reference of same app.

In order to get my binding working... I need to change the order of input like below...

UpdateEnvironmentController.$inject = ['$scope', '$http', '$rootScope'];

function UpdateEnvironmentController($scope, $rootScope, $http) 

With new definition of controller as suggeted... I am getting below error...

TypeError: object is not a function

This error is for using $http to make call to server. Can help what's wrong here.

Answer 1

I found the answer of my question. sure after lot and lots of google.

By default POST, PUT methods are not allowed in webAPI. You either need to use CORS package for that or another solution is (I used to fix my issue)...

Add below config in web.config

<system.webServer>
     <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Content-Type" />
        <add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" />
        <add name="Access-Control-Allow-Credentials" value="true" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>

and you also need to flush your OPTIONS request. Add below code in Global.aspx file...

protected void Application_BeginRequest()
        {
            if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
            {
                Response.Flush();
            }
        }

Answer 2

remove one $http from the $inject

UpdateEnvironmentController.$inject = ['$scope', '$http', '$rootScope'];

Also, add an empty square bracket to the module

var webadmin = angular.module('PcPortal',[]);

Answer 3

The best way is to use CORS package. Simply install package Owin.Cors at the Nuget package Console

Install-Package Microsoft.Owin.Cors 

After this, you need to add the configuration at your startup.cs. It will look something similar like below.

public void Configuration(IAppBuilder app)
        {
            HttpConfiguration config = new HttpConfiguration();

            ConfigureOAuth(app);

            WebApiConfig.Register(config);
            app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
            app.UseWebApi(config);

        }