405 Method Not Allowed for URL angular2+ typescript webapp

Question

I am developing an angular2+ app with typescript. I am trying to pull data for one of my Angular2 Kendo grid and making the following call to get results to populate the grid. In this web call I am sending a status ID , skip and take and a Sort array which contains the field I want to sort and the direction I want it sorted in.

Below is my typescript code which makes the web service call:

  getUserRequests(statusId: number, skip: number, take: number, sort: SortDescriptor[]): Observable<GridResult> {
                     private getUserRequestsUrl = environment.serviceHostName + environment.serviceAppURL + '/api/Dashboard/GetUserRequestsByStatuses';

        var headers = new Headers();
        headers.append('Content-Type', 'application/json;');

        return this.http.post(this.getUserRequestsUrl, JSON.stringify({ "Filter": { "Field": "StatusId", "Value": statusId, "Operator": "eq" },
 "Skip": skip, "Take": take, "Sort": sort }), { headers: this.headers }).share()
            .map((res: Response) => res.json())
            .map(response => (<GridResult>{
                data: response.Data ,
                total: response.Count
            }));

    }

This is my service side code which never gets hit.

[HttpGet]
public HttpResponseMessage GetUserRequestsByStatuses([FromBody] DataRequest model)
{
    DataResponse<AngKendoGridDashboard> response =
        BusinessAccess.GetUserRequestsByStatuses(model);
    return CreateHttpResponse(response);
}

Problem I am facing: For some reason when make this web service call I get an error saying

"ERROR Response with status: 405 Method Not Allowed for URL: http://localhost/Services/RequestService/api/Dashboard/GetUserRequestsByStatuses" I checked the request object which is being sent and here is what is looks like

{"Filter":{"Field":"StatusId","Value":2,"Operator":"eq"},"Skip":0,"Take":5,"Sort":[{"field":"CreatedDate","dir":"desc"}]}

Also in the response body I see this message:

{"Message":"The requested resource does not support http method 'POST'."}

I been looking at this since Friday and could not come up with a solution. Any help is appreciated. I think it may be something to do with how I am sending my request object through typescript.

Answer 1

The error says the method POST is not supported yet the action has a HttpGet attribute.

You'll need to change the HttpGet to HttpPost.

[HttpPost]
public HttpResponseMessage GetUserRequestsByStatuses([FromBody] DataRequest model)
{
    DataResponse<AngKendoGridDashboard> response = 
        BusinessAccess.GetUserRequestsByStatuses(model);
    return CreateHttpResponse(response);
}

You could also lose the [FromBody] attribute too, it's the default given the parameter type.