Pourquoi est-ce que je reçois une demande OPTIONS au lieu d'une demande GET?

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script>
$.get("http://example.com/", function(data) {
     alert(data);
});
</script>

il fait une requête OPTIONS à cette URL, puis le rappel n'est jamais appelé avec quoi que ce soit.

Quand ce n'est pas du domaine croisé, cela fonctionne très bien.

JQuery ne devrait-il pas simplement passer l'appel avec un <script>nœud, puis faire le rappel lorsqu'il est chargé? Je comprends que je ne pourrai pas obtenir le résultat (car il s'agit d'un domaine croisé), mais c'est OK; Je veux juste que l'appel passe. Est-ce un bug ou est-ce que je fais quelque chose de mal?

Selon MDN ,

Demandes de contrôle en amont

Contrairement aux demandes simples (décrites ci-dessus), les demandes "de contrôle en amont" envoient d'abord un en-tête de demande HTTP OPTIONS à la ressource de l'autre domaine, afin de déterminer si la demande réelle peut être envoyée en toute sécurité. Les demandes intersites sont contrôlées en amont comme ceci car elles peuvent avoir des implications sur les données des utilisateurs. En particulier, une demande est contrôlée en amont si:

• Il utilise des méthodes autres que GET ou POST. En outre, si POST est utilisé pour envoyer des données de demande avec un type de contenu autre que application / x-www-form-urlencoded, multipart / form-data ou text / plain, par exemple si la demande POST envoie une charge utile XML au serveur en utilisant application / xml ou text / xml, la demande est alors contrôlée en amont.
• Il définit des en-têtes personnalisés dans la demande (par exemple, la demande utilise un en-tête tel que X-PINGOTHER)

Les OPTIONS proviennent de http://www.w3.org/TR/cors/ Voir http://metajack.im/2010/01/19/crossdomain-ajax-for-xmpp-http-binding-made-easy/ pour un peu plus d'infos

Si vous essayez de POSTER

Assurez-vous de JSON.stringifyvos données de formulaire et envoyez en tant que text/plain.

<form id="my-form" onSubmit="return postMyFormData();">
    <input type="text" name="name" placeholder="Your Name" required>
    <input type="email" name="email" placeholder="Your Email" required>
    <input type="submit" value="Submit My Form">
</form>

function postMyFormData() {

    var formData = $('#my-form').serializeArray();
    formData = formData.reduce(function(obj, item) {
        obj[item.name] = item.value;
        return obj;
    }, {});
    formData = JSON.stringify(formData);

    $.ajax({
        type: "POST",
        url: "https://website.com/path",
        data: formData,
        success: function() { ... },
        dataType: "text",
        contentType : "text/plain"
    });
}

Je ne pense pas que jQuery fera naturellement une requête JSONP quand on lui donnera une URL comme ça. Il fera cependant une requête JSONP lorsque vous lui direz quel argument utiliser pour un rappel:

$.get("http://metaward.com/import/http://metaward.com/u/ptarjan?jsoncallback=?", function(data) {
     alert(data);
});

Il appartient entièrement au script récepteur d'utiliser cet argument (qui ne doit pas être appelé "jsoncallback"), dans ce cas, la fonction ne sera jamais appelée. Mais, puisque vous avez déclaré que vous vouliez simplement que le script sur metaward.com s'exécute, cela suffirait.

En fait, les demandes AJAX inter-domaines (XMLHttp) ne sont pas autorisées pour des raisons de sécurité (pensez à récupérer une page Web "restreinte" du côté client et à la renvoyer au serveur - ce serait un problème de sécurité).

La seule solution de contournement sont les rappels. C'est-à-dire: créer un nouvel objet de script et pointer le src vers le JavaScript de fin, qui est un rappel avec des valeurs JSON (myFunction ({data}), myFunction est une fonction qui fait quelque chose avec les données (par exemple, les stocker dans une variable).

Changez simplement "application / json" en "text / plain" et n'oubliez pas le JSON.stringify (demande):

var request = {Company: sapws.dbName, UserName: username, Password: userpass};
    console.log(request);
    $.ajax({
        type: "POST",
        url: this.wsUrl + "/Login",
        contentType: "text/plain",
        data: JSON.stringify(request),

        crossDomain: true,
    });

J'ai eu le même problème. Mon correctif a été d'ajouter des en-têtes à mon script PHP qui ne sont présents que dans un environnement de développement.

Cela permet des demandes interdomaines:

header("Access-Control-Allow-Origin: *");

Cela indique à la demande de contrôle en amont que le client peut envoyer les en-têtes qu'il souhaite:

header("Access-Control-Allow-Headers: *");

De cette façon, il n'est pas nécessaire de modifier la demande.

Si vous avez des données sensibles dans votre base de données de développement qui pourraient potentiellement être divulguées, vous pourriez y réfléchir à deux fois.

Dans mon cas, le problème n'était pas lié à CORS puisque j'émettais un POST jQuery au même serveur Web. Les données étaient JSON mais j'avais omis le paramètre dataType: 'json'.

Je n'ai pas (ni ajouté) un paramètre contentType comme indiqué dans la réponse de David Lopes ci-dessus.

Il semble que Firefox et Opera (testés sur mac également) n'aiment pas le caractère interdomaine de cela (mais Safari est très bien avec ça).

Vous devrez peut-être appeler un code côté serveur local pour boucler la page distante.

J'ai pu le réparer à l'aide des en-têtes suivants

Access-Control-Allow-Origin
Access-Control-Allow-Headers
Access-Control-Allow-Credentials
Access-Control-Allow-Methods

Si vous êtes sur Nodejs, voici le code que vous pouvez copier / coller.

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin','*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  res.header('Access-Control-Allow-Credentials', true);
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH');
  next();
});