如何从 Ajax Post 调用中调用跨域 WebAPI？答案

【问题标题】：How to call cross domain WebAPI from Ajax Post call?如何从 Ajax Post 调用中调用跨域 WebAPI？
【发布时间】：2018-01-20 10:34:48
【问题描述】：

我可以调用WebAPI，但是当我尝试使用Ajax 向POST API 方法发布JSON 数据时，我得到null 值。我在这里做错了什么？

我在WebAPI 中有以下代码

MyData class 的代码

public class MyData
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

Ajax 调用代码

function PostData()
{
    var _data = JSON.stringify({ value : { FirstName: "ABC", LastName: "XYZ" } });
    $.ajax({
        url: "http://localhost:57786/api/values",
        type: "POST",
        contentType: "application/json",
        data: _data,
        success: function (data) {
            alert("Success");
        },
        error: function (error) {
            alert("Error");
        }
    });
}

【问题讨论】：

这和跨域调用有什么关系？
因为相同的代码适用于相同的域调用
该信息对您的问题很有用
你的断点被命中。所以请求正在处理中。那么在您的情况下，某个域调用和跨域调用有什么区别？
这里跨域添加信息。问题是我得到空值。我应该从问题中删除cross domain 吗？

标签： json ajax asp.net-mvc asp.net-web-api

【解决方案1】：

jQuery.ajax() 方法不知道带有大写 C 的名为“ContentType”的属性。切换到contentType

总而言之应该是这样的：

//With or without value property
var _data = JSON.stringify({ FirstName: "ABC", LastName: "XYZ" });
$.ajax({
    url: "http://localhost:57786/api/values",
    type: "POST",
    contentType: "application/json", //lower case 'c'!
    data: _data,
    success: function (data) {
        alert("Success");
    },
    error: function (error) {
        alert("Error");
    }
});

如果你想收到错误，如果你的模型无效，你需要在你的控制器中这样做：

public HttpResponseMessage Post([FromBody]MyData value)
{
    if(value.FirstName != null && value.LastName != null)
    {
        return Request.CreateResponse(HttpStatusCode.OK);
    }
    return Request.CreateResponse(HttpStatusCode.BadRequest, "Something went wrong");
}

现在，如果您将无效的 json 发布到模型绑定器，您将收到错误请求错误消息。

【讨论】：

感谢您的回答。如果需要发布 2 个自定义对象怎么办？
每个请求只能发布一个对象。所以视图模型是要走的路。基本上是一个围绕 2 个或更多其他类的类。谷歌一下就行了。
啊，我明白了。但是我们可以在 MVC 控制器操作中发布JSON.stringify({ value : { FirstName: "ABC", LastName: "XYZ" } })。因此，如果我在 WebAPI 中需要相同的功能，那么我应该在 WebAPI 中使用 MVC 控制器吗？它会工作吗？
您的第一点不正确 - JSON.stringify({ value : { FirstName: "ABC", LastName: "XYZ" } }); 可以正常工作（您的 JSON.stringify({ FirstName: "ABC", LastName: "XYZ" }); 也可以）
@StephenMuecke 但JSON.stringify({ value : { FirstName: "ABC", LastName: "XYZ" } }); 不起作用。它赋予null 价值。只有JSON.stringify({ FirstName: "ABC", LastName: "XYZ" });) 有效。

【解决方案2】：

问题的解决方案是Parameter Binding 概念。

我不需要将我的对象命名为value，因为WebAPI 中最多允许有一个[FromBody] 属性。更多解释请阅读链接

Parameter Binding

Parameter Binding in ASP.NET Web API

WebAPI's POST 将只接受来自正文的一个复杂类型参数。在我的情况下，MyData 是一个复杂类型，WebAPI's POST 方法将期望来自主体的复杂类型的属性。这意味着我只需要传递像这样的复杂类型的属性

{ FirstName: "ABC", LastName: "XYZ" }.

function PostData()
{
    var _data = JSON.stringify({ FirstName: "ABC", LastName: "XYZ" });
    $.ajax({
        url: "http://localhost:57786/api/values",
        type: "POST",
        contentType: "application/json",
        data: _data,
        success: function (data) {
            alert("Success");
        },
        error: function (error) {
            alert("Error");
        }
    });
}

【讨论】：