Perché ricevo una richiesta OPTIONS anziché una richiesta 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>

fa una richiesta OPTIONS a quell'URL e quindi il callback non viene mai chiamato con niente.

Quando non è interdominio, funziona bene.

JQuery non dovrebbe semplicemente effettuare la chiamata con un <script>nodo e quindi effettuare la richiamata quando viene caricata? Capisco che non sarò in grado di ottenere il risultato (dal momento che è cross-domain), ma va bene; Voglio solo passare la chiamata. È un bug o sto facendo qualcosa di sbagliato?

Secondo MDN ,

Richieste preflight

A differenza delle richieste semplici (discusse sopra), le richieste "preflight" inviano prima un'intestazione di richiesta OPTIONS HTTP alla risorsa sull'altro dominio, al fine di determinare se la richiesta effettiva è sicura da inviare. Le richieste tra siti sono preflight in questo modo poiché potrebbero avere implicazioni per i dati dell'utente. In particolare, viene preflight una richiesta se:

• Utilizza metodi diversi da GET o POST. Inoltre, se POST viene utilizzato per inviare dati di richiesta con un tipo di contenuto diverso da application / x-www-form-urlencoded, multipart / form-data o text / plain, ad esempio se la richiesta POST invia un payload XML al server usando application / xml o text / xml, la richiesta viene preflight.
• Imposta le intestazioni personalizzate nella richiesta (ad es. La richiesta utilizza un'intestazione come X-PINGOTHER)

Le OPZIONI provengono da http://www.w3.org/TR/cors/ Vedi http://metajack.im/2010/01/19/crossdomain-ajax-for-xmpp-http-binding-made-easy/ per un po 'più di informazioni

Se stai cercando di POST

Accertati dei JSON.stringifydati del modulo e invia come 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"
    });
}

Non credo che jQuery farà naturalmente una richiesta JSONP quando gli viene dato un URL del genere. Farà comunque una richiesta JSONP quando gli dirai quale argomento usare per un callback:

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

Spetta interamente allo script di ricezione utilizzare quell'argomento (che non deve essere chiamato "jsoncallback"), quindi in questo caso la funzione non verrà mai chiamata. Ma, dal momento che hai dichiarato che vuoi solo eseguire lo script su metaward.com, questo lo farebbe.

In effetti, le richieste AJAX (XMLHttp) tra domini non sono consentite per motivi di sicurezza (pensate a recuperare una pagina Web "limitata" dal lato client e inviarla al server - questo sarebbe un problema di sicurezza).

L'unica soluzione alternativa sono i callback. Questo è: creazione di un nuovo oggetto script e puntamento di src al JavaScript lato-end, che è un callback con valori JSON (myFunction ({data}), myFunction è una funzione che fa qualcosa con i dati (ad esempio, memorizzandolo in una variabile).

Basta cambiare "application / json" in "text / plain" e non dimenticare JSON.stringify (richiesta):

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,
    });

Ho avuto lo stesso problema. La mia soluzione era aggiungere intestazioni al mio script PHP che sono presenti solo in ambiente dev.

Ciò consente richieste tra domini:

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

Questo indica alla richiesta di verifica preliminare che è corretto che il client invii le intestazioni che desidera:

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

In questo modo non è necessario modificare la richiesta.

Se nel tuo database di sviluppo sono presenti dati sensibili che potrebbero essere trapelati, potresti pensarci due volte.

Nel mio caso, il problema non era correlato a CORS poiché stavo emettendo un POST jQuery sullo stesso server Web. I dati erano JSON ma avevo omesso il parametro dataType: 'json'.

Non avevo (né ho aggiunto) un parametro contentType come mostrato nella risposta di David Lopes sopra.

Sembra che Firefox e Opera (testati anche su Mac) non apprezzino il dominio interdominio di questo (ma Safari va bene con esso).

Potrebbe essere necessario chiamare un codice lato server locale per arricciare la pagina remota.

Sono stato in grado di risolverlo con l'aiuto delle seguenti intestazioni

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

Se sei su Nodejs, ecco il codice che puoi copiare / incollare.

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();
});