404 onWeb API routes with parameters

Question

I'm stumped by this error. I have an API controller as follow's

using Cousant.InvestNow.Web.Areas.Customer.Models;
using Cousant.InvestNow.Web.Controllers;
using log4net;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using TheOakSoft.ApiClient;

namespace Cousant.InvestNow.Web.Areas.Customer.Controllers
{
    [Authorize]
    [RoutePrefix("customer/api/abl")]
    public class AssetBackedLendingApiController : BaseWebApiController
    {
        [HttpGet, Route("my-loans/{customer_id}")]
        public HttpResponseMessage GetMyLoans(string customerId)
        {
            return HandleResponseException(response =>
            {
                var apiClient = fluentApiClient.NewGetRequest("investnow", "my-loans").AddQuery("customer_id", $"{customerId}");
                var resp = apiClient.GetResponse();
                response.StatusCode = resp.Success && resp.Data != null ? HttpStatusCode.OK : HttpStatusCode.BadRequest;
                response.Content = new ObjectContent<ApiResponse>(resp, GetMediaTypeFormatter());
            });
        }

        [HttpGet, Route("get-loan-detail/{application_id:int}")]
        public HttpResponseMessage GetLoanDetails(int applicationId)
        {
            return HandleResponseException(response =>
            {              
                var apiClient = fluentApiClient.NewGetRequest("investnow", "get-loan-detail").AddQuery("application_id", $"{applicationId}");
                var resp = apiClient.GetResponse();
                response.StatusCode = resp.Success && resp.Data != null ? HttpStatusCode.OK : HttpStatusCode.BadRequest;
                response.Content = new ObjectContent<ApiResponse>(resp, GetMediaTypeFormatter());
            });

        }
    }
}

When I call the endpoint from Postman, It works.

but when I try calling the same endpoints from JavaScript, I get a 404 Error every time. I'm working on a legacy application and I've written such endpoint before but why this isn't working is beyond me. Please note that this only happens with endpoints that require parameters. Other endpoints in the same controller work fine as long as no route parameters are being passed. Even POST requests work fine.Just GET request with parameters are the issue.

In my Javascript code, I call the enpoints with Axios

getLoanDetails: function () {
    var self = this;
    $.LoadingOverlay("show");
    axios.get('/customer/api/abl/get-loan-detail', {
        params: {
            application_id: 50
            }
        })
        .then(function (response) {
        })
        .catch(function (error) {

        })
        .then(function () {
            
        });
},

getLoanHistory2: function () {
var self = this;
axios.get('/customer/api/abl/my-loans', {
        params: {
            customer_id: self.customerId
       }
    })
    .then(function (response) {
    })
    .catch(function (error) {

    })
    .then(function () {
    });
}

Answer 1

axios-get's params add the parameters as query string

so axios.get('/user?ID=12345') is equivalent to

axios.get('/user', {
    params: {
      ID: 12345
    }
  })

Your code has defined the parameter as route not a query parameter so

axios.get('/customer/api/abl/get-loan-detail', {
        params: {
            application_id: 50
            }
        })

is resolving to /customer/api/abl/get-loan-detail?application_id=50instead of /customer/api/abl/get-loan-detail/50 that's why you are getting 404.

You can create the url as follows

axios.get(`/customer/api/abl/my-loans/${self.customerId}`).then