Vue fetch post data to controller asp.net mvc

Question

J'utilise Vue.js et j'essaie de faire une requête post et d'envoyer les données { name : 'TestName' } au contrôleur, mais quand j'arrive au contrôleur, au lieu que le nom soit égal à "TestName", il est null.

Voici ma demande Fetch : post

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

Et voici ma méthode d'action ReceiveName dans le HomeController

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

Ici, le nom doit être "TestName", mais il est NULL

J'ai essayé de répondre à cette question Comment transmettre des données à un contrôleur en utilisant l'api Fetch dans asp.net core ? , pour définir [FromBody] dans la méthode ReceiveName comme suit public string ReceiveName( [FromBody] string name) mais cela n'a pas fonctionné pour moi. Ensuite, j'ai essayé d'ajouter des en-têtes au corps de la requête.

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

Mais lorsque je fais cela, j'obtiens cette erreur dans le navigateur

Échec du chargement https://localhost:44362/Home/ReceiveName : La réponse pour le contrôle en amont n'a pas le statut HTTP ok.

Je pense que c'est à cause des règles CORS.

Je fais tourner mon backend sur https://localhost:44362 et mon frontend sur http://localhost:8080/ J'ai donc dû modifier mes règles CORS dans le fichier web.config comme suit

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

Ma question est la suivante - Comment puis-je recevoir les données de Fetch:post dans ma méthode d'action ?

Est-il nécessaire de créer une chaîne de requête ?

Mais je ne veux pas envoyer ma chaîne "TestName" en tant que FormData Je sais que si je l'envoie de cette manière, je la recevrai dans ma méthode d'action, mais est-ce une bonne façon d'envoyer une chaîne de caractères ?

Answer 1

J'ai rencontré un problème similaire et j'ai trouvé une solution à mon problème. Je pense que vous devez définir une classe de modèle avec une classe name puis ajoutez [FromBody] à votre paramètre d'action.

Créer une classe de modèle...

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

Utilisez ensuite ce modèle comme type de paramètre...

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

Je ne suis pas fan de cette solution, mais c'est la meilleure que j'ai trouvée en faisant des recherches. J'espère que cela vous aidera !

Answer 2

Malheureusement, .NET MVC n'inclut pas l'attribut [FromBody] (il n'est disponible que dans Web API ou .NET Core). Pour accéder aux informations contenues dans le corps d'un message, vous pouvez utiliser l'attribut HttpRequestBase.InputStream propriété de Contrôleur.Requête .

Voici un exemple (ce code utilise Newtonsoft pour désérialiser l'objet json dans le corps de la requête).

[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)
    {
    }

Introduire une valeur dans la variable data. JSON.stringify(data). <3