Impossible d'obtenir des en-têtes à partir de la requête jQuery AJAX dans l'API Web ASP.NET

Question

J'ai une API Web ASP.NET hébergée sur Azure. J'ai intégré le gestionnaire de messages HTTP à cette API. Le gestionnaire de messages est frappé quand je le frappe en utilisant l'appel AJAX. J'envoie également un en-tête de demande dans mon appel AJAX. Le problème est que je ne reçois pas l'en-tête envoyé à partir de l'appel AJAX à Message Handler intégré dans l'API Web. Reportez-vous l'image: Debugger screenshot

Ci-dessous le code de ma requête AJAX:

$.ajax({ 
    url: "https://someservicename.azurewebsites.net/Service/RequestHandler", 
    beforeSend: function (xhr) { 
     xhr.setRequestHeader('Token', '86810e135958961ad4880ad'); 
    }, 
    type: "POST", 
    crossDomain: true, 
    data: { 
     param: "Passed Parameter" 
    }, 
    success: function (msg) { 
     console.log(msg); 
    }, 
    error: function (XMLHttpRequest, textStatus, errorThrown) { 
     console.log(textStatus); 
    } 
}); 

Le gestionnaire de messages dans l'API Web ressemble ci-dessous:

protected async override Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken) 
{ 
    string authToken; 
    try 
    { 
     authToken = request.Headers.GetValues("Token").FirstOrDefault(); 

     if (authToken != "86810e135958961ad4880ad") 
     { 

      return await Task.Factory.StartNew(() => 
      { 
       return new HttpResponseMessage(HttpStatusCode.BadRequest) 
       { 
        Content = new StringContent("Unauthorized access!") 
       }; 
      }); 
     } 
     else 
     { 
      return await base.SendAsync(request, cancellationToken); 
     } 
    } 
    catch (System.InvalidOperationException) 
    { 
     return null; 
    } 
} 

Quand je lance le code de mon IIS localhost la demande qui est envoyée est quelque chose comme ci-dessous:

Accept:*/* 
Accept-Encoding:gzip, deflate, sdch, br 
Accept-Language:en-US,en;q=0.8 
Access-Control-Request-Headers:token 
Access-Control-Request-Method:POST 
Connection:keep-alive 
Host:someservicename.azurewebsites.net 
Origin:http://localhost:12522 
Referer:http://localhost:12522/pocppd.html 
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36 

Et le respon se que j'obtenir dans la console est:

https://someservicename.azurewebsites.net/Service/RequestHandler. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:12522' is therefore not allowed access. The response had HTTP status code 500. 

Avec le client PostMan la demande fonctionne très bien, mais de localhost il renvoie une erreur. S'il vous plaît laissez-moi savoir la raison pour ne pas obtenir l'en-tête dans mon gestionnaire de message?

Answer 1

Vous devez ajouter dans votre web.config (vous pouvez modifier les valeurs que vous avez besoin):

<httpProtocol> 
     <customHeaders> 
      <add name="Access-Control-Allow-Origin" value="*" /> 
      <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept, Authorization, Token" /> 
      <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE" /> 
     </customHeaders> 
    </httpProtocol> 

Avant votre demande, une demande OPTIONS est envoyée à vous assurer que vous êtes autorisé à effectuer la demande . Comme l'erreur l'indique, "La réponse à la demande de contrôle en amont ne passe pas le contrôle d'accès vérifier: aucun en-tête" Access-Control-Allow-Origin "n'est présent sur la ressource demandée.". Ajouter les lignes ci-dessus dans Web.config passera l'en-tête nécessaire. MDN indique: "Contrairement aux requêtes simples (décrites ci-dessus), les requêtes" en amont "envoient d'abord un en-tête de requête HTTP OPTIONS à la ressource de l'autre domaine, afin de déterminer si la requête peut être envoyée en toute sécurité. Les demandes de site sont contrôlées en amont, car elles peuvent avoir des implications sur les données de l'utilisateur. "

Answer 2

Essayez cette

$.ajax({ 
    url: "https://someservicename.azurewebsites.net/Service/RequestHandler", 
    headers: { 
      "Token": "86810e135958961ad4880ad" 
     },  
    type: "POST", 
    crossDomain: true, 
    data: { 
     param: "Passed Parameter" 
    }, 
    success: function (msg) { 
     console.log(msg); 
    }, 
    error: function (XMLHttpRequest, textStatus, errorThrown) { 
     console.log(textStatus); 
    } 
});