对 c# web api 2 RESTful web 服务的 Angular 发布请求答案

【问题标题】：Angular post request to c# web api 2 RESTful web service对 c# web api 2 RESTful web 服务的 Angular 发布请求
【发布时间】：2018-11-07 13:04:19
【问题描述】：

我正在尝试从 Angular 客户端向 C# Web API 2 RESTful Web 服务发送 http post 请求。

我的客户：

var userId = "123456";
var password = "654321";

const headersContent = new Headers().set('Content-Type', 'application/x-www-form-urlencoded');
var url = "http://localhost:35615/login"
this.http.post(url, {
    "userId": userId,
    "password": password
}, {withCredentials: true}).subscribe(res => {
    console.log(res);
});

我的服务器：

[Route("login")]
[HttpPost]
public IHttpActionResult LoginReq([FromBody] string parameters)
{
    //Deserialize the parameters.
}

我的问题是参数 var 为空，尽管 chrome 中网络选项卡中的发布请求包含数据。

谁能解释我做错了什么以及如何解决它？谢谢！

【问题讨论】：

标签： c# angular rest http asp.net-web-api2

【解决方案1】：

您正在传递一个具有“UserId”和“Password”属性的匿名对象。创建一个将这两个属性作为字符串的 Data Contract 类，并在 REST 方法的参数中使用它。

public IHttpActionResult LoginReq([FromBody] User user) { ... }

【讨论】：

【解决方案2】：

如果您从 Angular POST 请求中传递对象，则可以将 Web API POST 方法更改为接受用户定义的类型作为参数以从请求正文中读取它。

您可以在 C# 中创建以下用户定义类型，以从您的 Angular Post 请求中绑定 UserId 和 Password 属性

public class UserLogin
{
    public int UserId { get; set; }
    public string Password { get; set; }
}

[Route("login")]
[HttpPost]
public IHttpActionResult LoginReq([FromBody] UserLogin user)
{
    //Deserialize the parameters.
}

我建议您通过documentation 阅读更多关于 Web API 中的参数绑定的信息。相信我，这值得你花时间。

【讨论】：

【解决方案3】：

您发布了userId 和password，但期待String parameters。更改为String userId、String password。 Modelbinder 只会绑定匹配的属性。

【讨论】：

试过这样 LoginReq([FromBody] string userId, [FromBody] string password) - 结果一样，参数为空
尝试在帖子中不带qoutes的参数=值，所以userId：userId，password：password

【解决方案4】：

只需添加JSON.stringify()，您将向服务器发送一个对象，该对象只需要一个字符串作为参数，因此将其作为字符串并传递值，否则在您的服务器端创建一个带有userid 和password 的模型并提及该对象

let obj =  {
        "userId": userId,
        "password": password
    };   
this.http.post(url, JSON.stringify(obj), {withCredentials: true}).subscribe(res => {
        console.log(res);
    });

上面的代码将与string parameters一起工作——继续尝试使用模型并从Angular传递对象

编码愉快！！

【讨论】：