En-têtes de demande de contrôle d'accès, est ajouté à l'en-tête dans la demande AJAX avec jQuery

Je voudrais ajouter un en-tête personnalisé à une demande AJAX POST de jQuery.

J'ai essayé ceci:

$.ajax({
    type: 'POST',
    url: url,
    headers: {
        "My-First-Header":"first value",
        "My-Second-Header":"second value"
    }
    //OR
    //beforeSend: function(xhr) { 
    //  xhr.setRequestHeader("My-First-Header", "first value"); 
    //  xhr.setRequestHeader("My-Second-Header", "second value"); 
    //}
}).done(function(data) { 
    alert(data);
});

Lorsque j'envoie cette demande et que je regarde avec FireBug, je vois cet en-tête:

OPTIONS xxxx / yyyy
Hôte HTTP / 1.1 : 127.0.0.1:6666
Agent utilisateur: Mozilla / 5.0 (Windows NT 6.1; WOW64; rv: 11.0) Gecko / 20100101 Firefox / 11.0
Accepter: text / html, application / xhtml + xml, application / xml; q = 0,9, / ; q = 0,8
Accept-Language: fr, fr-fr; q = 0,8, en-us; q = 0,5, en; q = 0,3
Accept-Encoding: gzip, deflate
Connection: keep -alive
Origin: null
Access-Control-Request-Method: POST
Access-Control-Request-Headers: my-first-header, my-second-header
Pragma: no-cache
Cache-Control: no-cache

Pourquoi mes en-têtes personnalisés vont-ils à Access-Control-Request-Headers:

En-têtes de demande de contrôle d'accès: mon-premier-en-tête, mon-deuxième-en-tête

Je m'attendais à des valeurs d'en-tête comme celle-ci:

My-First-Header: première valeur
My-Second-Header: deuxième valeur

C'est possible?

Ce que vous avez vu dans Firefox n'était pas la demande réelle; notez que la méthode HTTP est OPTIONS, pas POST. Il s'agissait en fait de la demande «pré-vol» que le navigateur fait pour déterminer si une demande AJAX interdomaine doit être autorisée:

http://www.w3.org/TR/cors/

L'en-tête Access-Control-Request-Headers dans la demande de pré-vol inclut la liste des en-têtes dans la demande réelle. Le serveur doit ensuite indiquer si ces en-têtes sont pris en charge dans ce contexte ou non, avant que le navigateur soumette la demande réelle.

Voici un exemple de définition d'un en-tête de demande dans un appel jQuery Ajax:

$.ajax({
  type: "POST",
  beforeSend: function(request) {
    request.setRequestHeader("Authority", authorizationToken);
  },
  url: "entities",
  data: "json=" + escape(JSON.stringify(createRequestObject)),
  processData: false,
  success: function(msg) {
    $("#results").append("The result =" + StringifyPretty(msg));
  }
});

Ce code ci-dessous fonctionne pour moi. J'utilise toujours des guillemets simples, et cela fonctionne très bien. Je suggère que vous n'utilisiez que des guillemets simples ou doubles, mais pas mélangés.

$.ajax({
    url: 'YourRestEndPoint',
    headers: {
        'Authorization':'Basic xxxxxxxxxxxxx',
        'X-CSRF-TOKEN':'xxxxxxxxxxxxxxxxxxxx',
        'Content-Type':'application/json'
    },
    method: 'POST',
    dataType: 'json',
    data: YourData,
    success: function(data){
      console.log('succes: '+data);
    }
  });

Étant donné que vous envoyez des en-têtes personnalisés, votre demande CORS n'est pas une simple demande . Le navigateur envoie donc d'abord une demande OPTIONS de contrôle en amont pour vérifier que le serveur autorise votre demande.

Si vous activez CORS sur le serveur, votre code fonctionnera. Vous pouvez également utiliser la récupération JavaScript à la place ( ici )

let url='https://server.test-cors.org/server?enable=true&status=200&methods=POST&headers=My-First-Header,My-Second-Header';


$.ajax({
    type: 'POST',
    url: url,
    headers: {
        "My-First-Header":"first value",
        "My-Second-Header":"second value"
    }
}).done(function(data) {
    alert(data[0].request.httpMethod + ' was send - open chrome console> network to see it');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Voici un exemple de configuration qui active CORS sur nginx (fichier nginx.conf):

location ~ ^/index\.php(/|$) {
   ...
    add_header 'Access-Control-Allow-Origin' "$http_origin" always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;
    if ($request_method = OPTIONS) {
        add_header 'Access-Control-Allow-Origin' "$http_origin"; # DO NOT remove THIS LINES (doubled with outside 'if' above)
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Max-Age' 1728000; # cache preflight value for 20 days
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'My-First-Header,My-Second-Header,Authorization,Content-Type,Accept,Origin';
        add_header 'Content-Length' 0;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        return 204;
    }
}

Voici un exemple de configuration qui active CORS sur Apache (fichier .htaccess)

# ------------------------------------------------------------------------------
# | Cross-domain Ajax requests                                                 |
# ------------------------------------------------------------------------------

# Enable cross-origin Ajax requests.
# http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity
# http://enable-cors.org/

# <IfModule mod_headers.c>
#    Header set Access-Control-Allow-Origin "*"
# </IfModule>

#Header set Access-Control-Allow-Origin "http://example.com:3000"
#Header always set Access-Control-Allow-Credentials "true"

Header set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Allow-Headers "My-First-Header,My-Second-Header,Authorization, content-type, csrf-token"

Et c'est pourquoi vous ne pouvez pas créer un bot avec JavaScript, car vos options sont limitées à ce que le navigateur vous permet de faire. Vous ne pouvez pas simplement commander un navigateur qui respecte la politique CORS , que la plupart des navigateurs suivent, pour envoyer des demandes aléatoires à d'autres origines et vous permettre d'obtenir la réponse simplement!

De plus, si vous avez essayé de modifier manuellement certains en-têtes de demande, comme origin-headerdans les outils de développement fournis avec les navigateurs, le navigateur refusera votre modification et pourra envoyer une OPTIONSdemande de contrôle en amont .

Essayez d'utiliser le bijou rack-cors . Et ajoutez le champ d'en-tête dans votre appel Ajax.