Vue получить данные поста на контроллер asp.net mvc

Question

Я использую Vue.js и пытаюсь сделать пост-запрос и отправить данные {name: 'TestName'} на контроллер, но когда я нажимаю на контроллер, вместо имени, равного "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
        });
    }`

И это мой метод действия ReceiveName в HomeController

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

Здесь имя должно быть «TestName», но оно равно NULL

Я пытался ответить на этот вопрос Как передать данные в контроллер с помощью API Fetch в ядре asp.net , чтобы установить[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/ поэтому мне пришлось отредактировать свои правила CORS в web.config следующим образом

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

У меня вопрос - Как я могу получить свои данные из Fetch: post для моего метода действия?

Нужно ли создавать строку запроса?

Но я не хочу отправлять мою строку "TestName" как FormData Я знаю, чтоесли я отправлю его так, я получу его в своем методе действия, но это хороший способ отправить строку?

Answer 1

К сожалению, .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 2

Я столкнулся с подобной проблемой и нашел решение своей проблемы.Я думаю, вам может потребоваться определить класс модели со свойством name, а затем добавить [FromBody] к параметру действия.

Создать класс модели ...

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

Затем используйте эту модель в качестве типа вашего параметра ...

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

Я не фанат этого решения, но это лучшее, что я смог найти в своих исследованиях.Надеюсь, это поможет вам!