来自 ajax 的 Web api Post 调用失败

Posted

技术标签:

【中文标题】来自 ajax 的 Web api Post 调用失败【英文标题】:Web api Post call from ajax fails 【发布时间】:2018-12-08 09:03:52 【问题描述】:

我有一个 web api 棒,我用 POST 方法在 ajax 中调用它,将参数作为 data 发送。它给了我一个 404 not found 错误。

但是当我在查询字符串中传递数据时,它工作正常。请帮助我解决问题并在使用正文中的数据而不是查询字符串调用方法时使其正常工作。

注意:Web 应用程序和 Web-api 在不同的端口上运行

在查询字符串中发送具体类型对象也不起作用,并且作为 null 接收到 web api

配置

<httpProtocol>
          <customHeaders>
            <add name="Access-Control-Allow-Origin" value="*" />
            <add name="Access-Control-Allow-Headers" value="Content-Type, contentType, data" />
            <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
          </customHeaders>
</httpProtocol>

控制器

 public class RiskController : ApiController
    

方法

[HttpGet, HttpPost]
    public DashboardContainerViewModel GetDashboardContainer(string token)
    

Ajax 调用

var postData =  token: priv.secToken ;        

$.ajax(
            type: 'POST',
            url: 'http://localhost:48060/api/Risk/GetDashboardContainer',
            dataType: 'json',
            contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
            data: postData,
            success: function (data) 
                pub.dashboardHeader(data.Name);
                var defaultTab = _.find(data.Dashboards, function (tab) 
                    return tab.IsDefault == true;
                );

我得到 POST http://localhost:48060/api/Risk/GetDashboardContainer 404 (Not Found)

Fiddler 请求标头

POST http://localhost:48060/api/Risk/GetDashboardContainer HTTP/1.1
Host: localhost:48060
Connection: keep-alive
Content-Length: 142
Pragma: no-cache
Cache-Control: no-cache
Accept: application/json, text/javascript, */*; q=0.01
Origin: http://localhost:10452
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (Khtml, like Gecko) Chrome/67.0.3396.99 Safari/537.36
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: http://localhost:10452/Authorised/DashBoard/DashBoard.aspx
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9

token=ETvgg0YH4sx9w%2FiQL5560S20Ja4jGix%2FiBTOFGpQCliYZVilmtKiXPbk30d8FTYbhUWyFqz8%2FqT1pmI0oY6rzDGQ7krL6d2fDKDKwJhfCNFXZxnv%2BPCUj5ki5eizdWOM

提琴手响应标头

HTTP/1.1 404 Not Found
Cache-Control: no-cache, no-store
Pragma: no-cache
Content-Type: application/json; charset=utf-8
Expires: -1
Server: Microsoft-IIS/8.0
X-AspNet-Version: 4.0.30319
X-SourceFiles: =?UTF-8?B?QzpcRGVmYXVsdENvbGxlY3Rpb25cQ0FNTVNfUHJvZHVjdHNcX1JlbGVhc2VcMTQxMExSLUFNXFdlYiBTZXJ2aWNlXENBTU1TLlNBQVMuV2ViQVBJXENBTU1TLlNBQVMuSVJNV2ViQVBJXGFwaVxSaXNrXEdldERhc2hib2FyZENvbnRhaW5lcg==?=
X-Powered-By: ASP.NET
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Content-Type, contentType, data
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Date: Fri, 29 Jun 2018 05:47:22 GMT
Content-Length: 215

"Message":"No HTTP resource was found that matches the request URI 'http://localhost:48060/api/Risk/GetDashboardContainer'.","MessageDetail":"No action was found on the controller 'Risk' that matches the request."

【问题讨论】:

您是否尝试在参数前添加 [FromBody],但请记住 HTTPGet 没有正文,因此默认情况下会查看查询字符串。 【参考方案1】:

根据我的观点和经验,这很可能是由于路由错误,您是否尝试过查看 RouteConfig.cs 以确保它为您的 API 设置了正确的路由? 像这样的:

public static void RegisterRoutes(RouteCollection routes)

    routes.IgnoreRoute("resource.axd/*pathInfo");

    routes.MapHttpRoute(
        name: "DefaultApi",
        routeTemplate: "api/controller/action/id",
        defaults: new  id = RouteParameter.Optional 
    );




【讨论】:

如果您能提供minimal example,那对您有很大帮助! :)【参考方案2】:

您的控制器方法使用简单类型参数。 WebApi 将在请求 URL 中搜索简单参数。所以如果你想 POST 参数,你必须告诉 WebApi 查看请求体。

public DashboardContainerViewModel GetDashboardContainer([FromBody] string token)

但您还需要更改发送数据的格式。以application/x-www-form-urlencoded 发送的简单类型数据的格式必须为'=value' 而不是'token=value'

var postData = "=testData"; 

【讨论】:

以上是关于来自 ajax 的 Web api Post 调用失败的主要内容,如果未能解决你的问题,请参考以下文章

Web API OWIN 从 $.AJAX POST withCredentials:true 接收空数据

csharp 创建一个从AJAX POST请求调用的Web API,它在对象中传递多个值

ASP.NET Web API 在来自 Chrome 扩展的并发 AJAX 调用上崩溃

AJAX 和 Web Api Post 方法 - 它是如何工作的?

Web Api 参数始终为空

如何使用 jQuery Ajax 调用从 ASP.NET Web Api 下载 CSV 文件