Comment faire une demande ajax avec jeton anti-contrefaçon dans mvc

j'ai un problème avec les détails ci-dessous du projet MVC.

quand j'essaye d'utiliser la requête ajax de jquery avec le panneau de chargement comme spinning gif( ou même texte), je reçois une erreur, observée de fiddler que

le champ "__RequestVerificationToken" du formulaire anti-contrefaçon requis n'est pas présent.

Si j'ai fait un commentaire [ValidateAntiForgeryToken] attribute à la méthode de POST-action et utiliser le panneau de chargement il fonctionne très bien.Je veux savoir pourquoi je reçois ce erreur.

j'ai même utilisé la chaîne de requête sérialisé avec

__RequestVerificationToken= $('input[name="__RequestVerificationToken"').val()

j'obtiens l'erreur

le jeton anti-contrefaçon n'a pas pu être déchiffré. Si cette application est hébergée par une ferme Web ou un cluster, assurez-vous que toutes les machines utilisent la même version de ASP.NET Pages Web et que le <machineKey> la configuration spécifie explicitement les clés de cryptage et de validation.

AutoGenerate ne peut pas être utilisé dans cluster

Que dois-je utiliser?

ici, il a mis à jour le code de question 

var token = $('input[name="__RequestVerificationToken"]').val();
$('#submitaddress').click(function subaddr(event) {
    event.preventDefault();
    event.stopPropagation();
  //$('#addAddress').html('<img src="/img/animated-overlay.gif"> Sending...');
   // $('#addAddress').blur();
    //  $(this).bl
    if ($('#Jobid').val()!="") {
        $('#TransportJobId').val(parseInt($('#Jobid').val()));
        $.ajax(
              {
                  url: '/TransportJobAddress/create',
                  type: 'POST',
                  data: "__RequestVerificationToken=" + token + "" + $('form[action="/TransportJobAddress/Create"]').serialize(),
                  success: function poste(data, textStatus, jqXHR) { $('#addAddress').html(data); return false; },
                  error: function err(jqXHR, textStatus, errorThrown) { alert('error at address :' + errorThrown); }
              });
    }
    else {
        var transportid = 2;
        $.ajax({
            url: '/TransportJob/create',
            type: 'POST',
            data: "__RequestVerificationToken=" + token + "" + $('form[action="/TransportJob/Create"]').serialize(),
            success: function sfn(data, textStatus, jqXHR) {
                transportid = parseInt(data);
                $('#Jobid').val(data);
               // alert('inserted id :' + data);
                $('#TransportJobId').val((transportid));
                $.ajax(
         {

             url: '/TransportJobAddress/create',
             type: 'POST',
             //beforeSend: function myintserver(xhr){  
             //        $('#addAddress').html('<div id="temp_load" style="text-align:center">please wait ...</div>');
             //}, 
             data: "__RequestVerificationToken=" + token + "" + $('form[action="/TransportJobAddress/Create"]').serialize(),
             success: function poste(data, textStatus, jqXHR) {
                 $('#addAddress').html(data);

             },
             error: function err(jqXHR, textStatus, errorThrown) {
                 alert('error at address :' + errorThrown);
             }

         });
            },
            error: function myfunction(jqXHR, textStatus, errorThrown) {
                alert("error at transport :" + jqXHR.textStatus);
            },
            complete: function completefunc() {
              //  alert('ajax completed all requests');
                return false;
            }

        });
    }
});

balises de formulaire 

<form action="/TransportJob/Create" method="post"><input     name="__RequestVerificationToken" type="hidden"   value="ydYSei0_RfyBf619dQrhDwwoCM7OwWkJQQEMNvNdAkefiFfYvRQ0MJYYu0zkktNxlJk_y1ZJO9-yb-  COap8mqd0cvh8cDYYik4HJ0pZXTgE1" />

TransportJob étiquette de formulaire 2 sur la même page

<form action="/TransportJobAddress/Create" method="post" novalidate="novalidate"><input name="__RequestVerificationToken" type="hidden"    value="Np2vUZJPk1TJlv846oPSU6hg4SjMHRcCk1CacaqZbpHOg8WbV4GZv06noRDl7F_iT9qQf3BIXo3n9wGW68sU mki7g3-ku_BSHBDN-g2aaKc1">

24
demandé sur Erik Philips 2013-11-05 16:22:52

5 réponses

Avez-vous ajouté votre jeton à l'en-tête de l'appel ajax?

vous devez ajouter L'Anti-Forgerytoken dans l'en-tête de votre message dans l'appel ajax:

var token = $('input[name="__RequestVerificationToken"]').val();

var headers = {};

headers['__RequestVerificationToken'] = token;

$.ajax({
        url: ... some url,
        headers: headers,
        ....
});

essayez ceci dans votre code:

var token = $('input[name="__RequestVerificationToken"]').val();
var tokenadr = $('form[action="/TransportJobAddress/Create"] input[name="__RequestVerificationToken"]').val(); 

var headers = {};
var headersadr = {};
headers['__RequestVerificationToken'] = token;
headersadr['__RequestVerificationToken'] = tokenadr;

$('#submitaddress').click(function subaddr(event) {
    event.preventDefault();
    event.stopPropagation();
  //$('#addAddress').html('<img src="/img/animated-overlay.gif"> Sending...');
   // $('#addAddress').blur();
    //  $(this).bl
    if ($('#Jobid').val()!="") {
        $('#TransportJobId').val(parseInt($('#Jobid').val()));
        $.ajax(
              {
                  url: '/TransportJobAddress/create',
                  type: 'POST',
                  headers:headersadr, 
                  data: "__RequestVerificationToken=" + token + "" + $('form[action="/TransportJobAddress/Create"]').serialize(),
                  success: function poste(data, textStatus, jqXHR) { $('#addAddress').html(data); return false; },
                  error: function err(jqXHR, textStatus, errorThrown) { alert('error at address :' + errorThrown); }
              });
    }
    else {
        var transportid = 2;
        $.ajax({
            url: '/TransportJob/create',
            type: 'POST',
            headers:headers, 
            data: $('form[action="/TransportJob/Create"]').serialize(),
            success: function sfn(data, textStatus, jqXHR) {
                transportid = parseInt(data);
                $('#Jobid').val(data);
               // alert('inserted id :' + data);
                $('#TransportJobId').val((transportid));
                $.ajax(
         {

             url: '/TransportJobAddress/create',
             type: 'POST',
             //beforeSend: function myintserver(xhr){  
             //        $('#addAddress').html('<div id="temp_load" style="text-align:center">please wait ...</div>');
             //},
             headers:headers, 
             data: $('form[action="/TransportJobAddress/Create"]').serialize(),
             success: function poste(data, textStatus, jqXHR) {
                 $('#addAddress').html(data);

             },
             error: function err(jqXHR, textStatus, errorThrown) {
                 alert('error at address :' + errorThrown);
             }

         });
            },
            error: function myfunction(jqXHR, textStatus, errorThrown) {
                alert("error at transport :" + jqXHR.textStatus);
            },
            complete: function completefunc() {
              //  alert('ajax completed all requests');
                return false;
            }

        });
    }
});

ajout de la ligne headers dans votre appel ajax.

18
répondu freshbm 2013-12-26 01:32:47

au lieu de l'ajouter manuellement à chaque requête, je fais habituellement quelque chose comme ceci:

var token = $('input[name="__RequestVerificationToken"]').val();
$.ajaxPrefilter(function (options, originalOptions) {
  if (options.type.toUpperCase() == "POST") {
    options.data = $.param($.extend(originalOptions.data, { __RequestVerificationToken: token }));
  }
});

Cela ajoutera automatiquement à votre jeton ajax POST que vous faites.

34
répondu Kippie 2013-11-05 12:46:51

Avez-vous ajouté le jeton à votre avis? Comme ceci: 

<form method="post" action="/my-controller/my-action">
    @Html.AntiForgeryToken()
</form>

puisque votre contrôleur recevant le post est à la recherche du jeton anti-contrefaçon, vous devez vous assurer que vous l'ajoutez à votre formulaire dans la vue.

EDIT:

essayez de compiler vos données dans json en premier:

var formData = $('form[action="/TransportJobAddress/Create"]').serialize();
$.extend(formData, {'__RequestVerificationToken': token });

//and then in your ajax call:
$.ajax({
    //...
    data:formData
    //...
});
3
répondu hofnarwillie 2013-11-05 12:51:19

Afficher ou de Mise en page:

< form id='_id' method= 'POST' > @html.antiforgeryToken(); < /forme>

la fonction d'appel ajax:

var data={...};
var token=$('#_id').serializeObject();
var dataWithAntiforgeryToken = $.extend(data,token);

$.ajax(
{
....,
data: dataWithAntiforgeryToken;
}
)
1
répondu Ashish Kumar Sharma 2015-06-17 13:13:26

je voulais sécuriser à la fois L'Ajax et la requête normale, alors voici ce que j'ai trouvé:

tout d'abord en utilisant l'excellent blog de haacked.com J'ai créé le Provider Conditionalfilter tel que décrit.

puis j'ai créé toutes les classes comme décrit sur le blog de codethinked.

sur ma page _layout j'ai ajouté la pièce avec les $.ajaxPrefilter comme décrit dans le blog... Cela assure que tout mon Ajax-callback Envoyer maintenant Jeton Antiforgery à travers l'en-tête.

Pour coller tous ensemble, j'ai ajouté ce morceau de code sur mon global.asax / Application_Start

(c, a) =>
                    (c.HttpContext.Request.IsAjaxRequest() &&
                     !string.Equals(c.HttpContext.Request.HttpMethod, "GET"))
                        ? new AjaxValidateAntiForgeryTokenAttribute()
                        : null,
(c, a) =>
                    (!c.HttpContext.Request.IsAjaxRequest() &&
                     string.Equals(c.HttpContext.Request.HttpMethod, "POST", StringComparison.OrdinalIgnoreCase))
                        ? new ValidateAntiForgeryTokenAttribute()
                        : null

en gros.. injectez l'attribut à tous mes contrôleurs qui ne sont pas GET.

après cela j'ai juste dû aller à tous mes (très peu) formulaires et ajouter le @HTML.AntiForgeryToken().

pour prouver que tout a fonctionné j'essaie juste de repeindre les choses avec une forme sans L'Anti-Forgerytoken et obtenir l'exception attendue. Et enlever le $.les requêtes ajaxPrefilter et create Ajax et l'exception attendue ont été reçues.

0
répondu CodeHacker 2014-01-10 16:22:41