javascript - Vue 获取发布数据到 Controller asp.net mvc

Question

我正在使用 Vue.js，我正在尝试发出发布请求并将数据 { name: 'TestName' } 发送到 Controller ，但是当我点击 Controller 时，名称等于“TestName”，它为空。

这是我的 Fetch:发布请求

   `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 , 像这样在 ReceiveName 方法中设置 [FromBody] public string ReceiveName( [FromBody] string name)，但它对我不起作用。然后我尝试添加标题以获取正文

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

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

Failed to load https://localhost:44362/Home/ReceiveName: Response for preflight does not have HTTP ok status.

我认为这是因为 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 发送我知道如果我这样发送它我会在我的操作方法中收到它，但这是发送字符串的好方法？

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.
}

我不是这个解决方案的粉丝，但它是我通过研究可以找到的最好的解决方案。希望对你有帮助!