404 带参数的 onWeb API 路由答案

【问题标题】：404 onWeb API routes with parameters404 带参数的 onWeb API 路由
【发布时间】：2021-01-22 14:32:34
【问题描述】：

我被这个错误难住了。我有一个如下的 API 控制器

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());
            });

        }
    }
}

当我从 Postman 调用端点时，它可以工作。

但是当我尝试从 JavaScript 调用相同的端点时，我每次都会收到 404 错误。我正在开发一个遗留应用程序，并且我之前已经编写过这样的端点，但是为什么这不起作用是我无法理解的。请注意，这只发生在需要参数的端点上。只要没有传递路由参数，同一控制器中的其他端点就可以正常工作。甚至 POST 请求也能正常工作。问题只是 GET 请求带有参数。

在我的 Javascript 代码中，我使用 Axios 调用 enpoints

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 () {
    });
}

【问题讨论】：

我已经发布了答案。如果您需要任何其他详细信息，请告诉我。
通过 url 传递参数也不起作用。
能否请您发布正在浏览器网络跟踪中形成的网址？
截图请看这里ibb.co/qDssPnH
更多截图ibb.co/mNfHtVn 见查询字符串参数部分

标签： c# asp.net-web-api controller axios http-status-code-404

【解决方案1】：

axios-get的参数添加参数作为查询字符串

所以axios.get('/user?ID=12345') 等价于

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

您的代码已将参数定义为路由而不是查询参数，所以

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

解析为/customer/api/abl/get-loan-detail?application_id=50而不是/customer/api/abl/get-loan-detail/50，这就是你得到404的原因。

您可以按如下方式创建网址

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

【讨论】：