Question

我正在使用Vue.js，并尝试发出发布请求并向控制器发送数据{name：'TestName'}，但是当我按下controller时，名称等于“ TestName”为空。

这是我的提取：发布请求

   `sendName() {
        let url = 'https://localhost:44362/Home/ReceiveName'
        fetch(url, {
            method: 'POST',
            body: JSON.stringify({ name: 'TestName' })
        }).then(function (response) {
            response
        }).catch(err => {
            err
        });
    }`

这是我在HomeController中的动作方法ReceiveName

 `[HttpPost]
    public string ReceiveName(string name)
    {
        *some code*
    }`

这里的名称必须为“ TestName”，但为NULL

我已经尝试过从问题How to pass data to controller using Fetch api in asp.net core中获得答案，在[FromBody]这样的ReceiveName方法中设置public string ReceiveName( [FromBody] string name)，但这对我不起作用。然后我尝试添加标题以获取正文

`headers: {
  'Content-Type': 'application/json'
},`

但是当我这样做时，我在浏览器中得到了这个错误

无法加载https://localhost:44362/Home/ReceiveName：飞行前响应没有HTTP正常状态。

我认为这是因为CORS的规定。

我在https://localhost:44362上运行我的后端，在http://localhost:8080/上运行我的前端，所以我不得不像这样在web.config中编辑我的CORS规则

 `<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Access-Control-Allow-Origin" value="*" />
    </customHeaders>
  </httpProtocol>`

我的问题是- 如何从Fetch：post接收数据到我的操作方法？

是否需要输入查询字符串？

但是我不想将字符串“ TestName”作为FormData发送，我知道如果这样发送，我将在我的action方法中收到它，但这是一个好方法发送一个字符串？

Answer 1

我遇到了类似的问题，并找到了解决我问题的方法。我认为您可能需要定义一个具有name属性的模型类，然后将[FromBody]添加到您的操作参数中。

创建模型类...

public class SomeModel
{
    public string name { get; set; }
}

然后使用该模型作为您的参数类型...

[HttpPost]
public string ReceiveName([FromBody]SomeModel model)
{
    // model.name should contain the value.
}

我不喜欢这种解决方案，但这是我通过研究可以找到的最好的解决方案。希望对您有帮助！

Answer 2

不幸的是，.NET MVC不包含[FromBody]属性（仅在Web API或.NET Core中可用）。为了访问帖子正文中的信息，可以使用HttpRequestBase.InputStream的Controller.Request属性。

这里是一个示例（此代码使用Newtonsoft来反序列化请求正文中的json对象）。

[HttpPost]
public ActionResult ReceiveName()
{
    System.IO.Stream request = Request.InputStream;
    request.Seek(0, SeekOrigin.Begin);
    string bodyData = new StreamReader(request).ReadToEnd();
    var data = JsonConvert.DeserializeObject<SomeType>(bodyData);

    //do something
    return Json(new { success = true});
}

Answer 3

async function postData() {
    var data="abc";
    // Default options are marked with *
    const response = await fetch("https://localhost:44334/api/Blog/", {
      method: 'POST', // *GET, POST, PUT, DELETE, etc.
      headers: {
        'Content-Type': 'application/json'
        // 'Content-Type': 'application/x-www-form-urlencoded',
      },
      redirect: 'follow', // manual, *follow, error
      referrer: 'no-referrer', // no-referrer, *client
      body: JSON.stringify(data) // body data type must match "Content-Type" header
    });
  }

    [HttpPost]
    public void Post([FromBody]string value)
    {
    }

将值设置为var数据。 JSON.stringify（数据）。 <3

Vue将发布数据提取到控制器ASP.NET MVC

3 个答案: