angularjs post error -405 (Method Not Allowed)

Question

I have a menubar.cshtml as partial view in which I have a menu item named navAllIssues. On its click I am calling GetUserProjects() method of my angularjs controller named IssuesController.But I am geting 405 (method not found error).

Error image

menubar.cshtml

<li id="navAllIssues" data-ng-controller="allIssuesController">
                         <a class="auto hideover" data-ng-click="GetUserProjects()">
                             <span class="pull-right text-muted">
                                 <i class="i i-circle-sm-o text"></i>
                                 <i class="i i-circle-sm text-active"></i>
                             </span>
                             <i class="i i-file-copy i-2x icon"></i>
                             <span class="font-bold">All Issues</span>
                         </a>

                     </li>

IssuesController.js

 $scope.GetUserProjects = function() {
    //var isMobileView = false;
    //$scope.issueCount = -1;
    alert('test1');
    $scope.issuesLoaded = false;
    $scope.issueDetailsLoaded = false;
    var windowWidth = $(window).width();
    if (windowWidth < 768) {
        isProjectSelected = false;
        $("#projectContainer").show();
        $("#email-content").hide();
        $("#issueContainer").hide();
        selectedTab = "project";
    }
    $("#busyIndicator").show();
    $scope.query = "";
    var url = 'api/Issues' + '/GetUserProjects/';
    $http.post(url, []).success(function(data, status, headers, config) {
        if (data != '' || data.length == 0) {
            if (data != '' || data.length == 0) {
                $scope.Projects = data;
                $scope.projectIssuesStatus = $scope.Projects.ProjectIssues;
                $scope.Projects = $filter('orderBy')($scope.Projects, 'Name');
                alert("test--"+$scope.Projects[0].Name);
                if ($scope.selectedProject == null) {
                    $scope.selectedProject = $scope.Projects[0];
                    $scope.target = $scope.selectedProject.ID;
                    if ($location.search().Project != undefined) {
                        $scope.target = $location.search().Project;
                        for (var countp = 0; countp < $scope.Projects.length; countp++) {
                            if ($scope.Projects[countp].ID == $scope.target) {
                                $scope.selectedProject = $scope.Projects[countp];
                            }
                        }
                    }
                } else {
                    for (var count = 0; count < $scope.Projects.length; count++) {
                        if ($scope.Projects[count].Id == $scope.selectedProject) {
                            $scope.selectedProject = $scope.Projects[count];
                        }
                    }
                }
                if ($scope.selectedProject.MyIssueCount > 0 || $scope.selectedProject.OpenIssueCount > 0) {
                    $scope.showIssues($scope.selectedProject);
                }
                //                    if (!isMobileView) {
                //                        $scope.showIssues($scope.Projects[0]);
                //                    }


            } else {
                $scope.selectedProject = null;
            }

        } else {
            $scope.errors.push(data.error);
        }
    });
    if ($scope.isVisible == false) {
        $("#changedetailsbox").hide();
        $scope.isVisible = true;
    }
    if ($scope.isVisibleReply == false) {
        $("#postReplybox").hide();
        $scope.isVisibleReply = true;
    }
};

Api controller

 [HttpPost]
    [AuthenticationRequired]
    public List<ProjectBO> GetUserProjects()
    {
        var userId = SessionItems.UserId;
        var result = BLL.PublicLayer.GetUserProjects(userId);
        return result.IsSuccessful ? result.Result : new List<ProjectBO>();
    }

Answer 1

Use absolute url to make a call to api,earlier I was using relative url due to which was getting 405(method not found) error.

Code to call by absolute url

var url =  window.location.protocol + '//' + window.location.host + '/api/Issues' + '/GetUserProjects/';

Answer 2

Method not allowed errors often mean that an HTTP method (GET, POST, PUT or DELETE) are not allowed. Is your service set-up to allow POSTS? Could you post your server-side code?

Answer 3

I faced the similar issue ,after a long research i found a simple solution which is working for me.

Remove all the CORS related settings in web.config

like

<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" />
      </customHeaders>
    </httpProtocol>

Just add these two lines in the WebAPIconfig.cs

// Web API routes

var cors = new EnableCorsAttribute("", "", "*"); config.EnableCors(cors);

and your post request from angular

 Factory.postData = function (data) {
        var request = $http({
            method: "POST",
            url: urlBase+'api/url',
            data: data,
            headers: {
                "Content-Type": "application/json"
            }
        });
        return request;
    }