Search code examples
c#angularjspostangular-resource

Why is my $resource POST resulting in a 404 error?

I have a .Net mobile service API that accepts an Id and a bool. If I call the API from Postman with the correct parameters and headers, it works fine. When I call it from my AngularJs app, I get a 404 error and I cannot figure out why.

My backend API method looks like this:

[HttpPost]
public async Task<IHttpActionResult> SetHoldStatus(string id, bool isHeld) 
  => Ok(new 
    { 
        Transfer = await _workItemRepository.SetTransferHoldStatus(id, isHeld) 
    });

My AngularJs controller looks like this:

(function () {
angular
    .module("pinnacleWarehouser")
    .controller("TransferListCtrl",
    ["transfers",
        "transferWorkItemHoldResource",
        TransferListCtrl]);

function TransferListCtrl(transfers, transferWorkItemHoldResource) {
    var vm = this;

    vm.transfers = transfers;
    vm.length = transfers.length;
    if (vm.length > 0) {
        vm.branch = transfers[0].branchId;

        for (var i = 0; i < vm.transfers.length; i++) {
            vm.transfers[i].transferId = vm.transfers[i].transferId.trim();
        };
    }
    vm.changeHold = function (transferId, isHeld) {
        transferWorkItemHoldResource.save({ Id: transferId, IsHeld: isHeld });
    };
}}());

My resource looks like this:

(function () {
"use strict";

angular
    .module("common.services")
    .factory("transferWorkItemHoldResource",
    ["$resource", transferWorkItemHoldResource]);

function transferWorkItemHoldResource($resource) {
    return $resource("https://my-test-url.net/api/TransferWorkItem/SetHoldStatus", {}, {
        save: {
            method: 'POST',                 
            headers: { 'ZUMO-API-VERSION': '2.0.0' }
        }
    });
}}());

So, when I just call the API from Postman, it updates the record with the bool that I send as a parameter. It works.

When I run the app, and call the API, this is what I get:

enter image description here

Looking at the request header in dev tools, I can see that my parameters are in a request payload:

enter image description here

I've never tried using $resource to POST with a custom header and parameters, so I may be missing something. I'm hoping someone can point out what I'm doing wrong.

Solution

  • You should define the action parameter as complex object.

    Change it

    public async Task<IHttpActionResult> SetHoldStatus(string id, bool isHeld)

    to

    public async Task<IHttpActionResult> SetHoldStatus(SetHoldStatusInput input)

public class SetHoldStatusInput
{
    public string Id { get; set; }

    public bool IsHeld { get; set; }
}