时间戳

首页 > 解决方案 > Vue 获取发布数据到控制器 asp.net mvc

javascript - Vue 获取发布数据到控制器 asp.net mvc

问题描述

我正在使用 Vue.js 并且我正在尝试发出发布请求并将数据 { name: 'TestName' } 发送到控制器，但是当我点击控制器时，名称等于“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，[FromBody]像这样在 ReceiveName 方法 中设置public string ReceiveName( [FromBody] string name)，但它对我不起作用。然后我尝试添加标题以获取正文

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

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

加载https://localhost:44362/Home/ReceiveName 失败：预检响应没有 HTTP ok 状态。

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

标签： javascriptc#.netasp.net-mvcvue.js

解决方案

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

创建模型类...

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

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

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

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

推荐阅读