Domanda Perché il mio JavaScript ottiene "No" l'intestazione Access-Control-Allow-Origin "è presente sulla risorsa richiesta" errore quando Postman non lo fa?


Sto cercando di fare l'autorizzazione usando JavaScript collegandosi al Riposante  API costruito dentro Pallone. Tuttavia, quando faccio la richiesta, ottengo il seguente errore:

XMLHttpRequest non può essere caricato http: // myApiUrl / login. Nessuna intestazione 'Access-Control-Allow-Origin' è presente sulla risorsa richiesta. L'origine 'null' non è quindi consentita l'accesso.

So che l'API o la risorsa remota deve impostare l'intestazione, ma perché ha funzionato quando ho fatto la richiesta tramite l'estensione di Chrome Postino?

Questo è il codice di richiesta:

$.ajax({
    type: "POST",
    dataType: 'text',
    url: api,
    username: 'user',
    password: 'pass',
    crossDomain : true,
    xhrFields: {
        withCredentials: true
    }
})
    .done(function( data ) {
        console.log("done");
    })
    .fail( function(xhr, textStatus, errorThrown) {
        alert(xhr.responseText);
        alert(textStatus);
    });

1859
2017-11-17 19:29


origine


risposte:


Se ho capito bene, stai facendo un XMLHttpRequest in un dominio diverso da quello in cui è attiva la tua pagina. Quindi il browser lo sta bloccando in quanto di solito consente una richiesta nella stessa origine per motivi di sicurezza. Devi fare qualcosa di diverso quando vuoi fare una richiesta interdominio. Un tutorial su come ottenere quello è Usando CORS.

Quando si utilizza il postino non sono limitati da questa politica. Citato da Cross-Origin XMLHttpRequest:

Le normali pagine Web possono utilizzare l'oggetto XMLHttpRequest per inviare e ricevere dati da server remoti, ma sono limitati dalla stessa politica di origine. Le estensioni non sono così limitate. Un'estensione può comunicare con server remoti al di fuori dell'origine, purché prima richieda autorizzazioni di origine incrociata.


997
2017-11-17 19:49



Questa non è una correzione per la produzione o quando l'applicazione deve essere mostrata al client, questo è utile solo quando l'interfaccia utente e il back-end sviluppo  sono su diversi server e in produzione sono effettivamente sullo stesso server. Ad esempio: durante lo sviluppo dell'interfaccia utente per qualsiasi applicazione, se è necessario testarla localmente indirizzandola al server di back-end, in tale scenario questa è la soluzione perfetta. Per la correzione della produzione, le intestazioni CORS devono essere aggiunte al server di back-end per consentire l'accesso all'origine incrociata.

Il modo più semplice è semplicemente aggiungere l'estensione in google chrome per consentire l'accesso utilizzando CORS.

(https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en-US)

Basta abilitare questa estensione ogni volta che vuoi consentire l'accesso a no 'Access-control-consentono origine' richiesta di intestazione.

O 

In Windows, incolla questo comando in correre finestra

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

questo aprirà un nuovo cromo browser che consente l'accesso a no 'Access-control-consentono origine' richiesta di intestazione.


451
2018-03-04 06:42



Se puoi affrontare JSON in cambio, quindi provare a utilizzare JSONP (notare la P alla fine) per parlare tra domini:

$.ajax({
  type: "POST",
  dataType: 'jsonp',
  ...... etc ......

Ulteriori informazioni su come lavorare con JSONP Qui:

L'avvento di JSONP - essenzialmente un consecutivo script di scripting cross-site - ha aperto la porta a potenti mashup di contenuti. Molti siti di rilievo forniscono servizi JSONP, consentendo l'accesso ai propri contenuti tramite un'API predefinita.


311
2018-02-22 00:42



È molto semplice da risolvere se stai usando PHP. Basta aggiungere il seguente script all'inizio della pagina PHP che gestisce la richiesta:

<?php header('Access-Control-Allow-Origin: *'); ?>

Avvertimento: Questo contiene un problema di sicurezza per il tuo file PHP che potrebbe essere chiamato dagli autori di attacchi. devi utilizzare sessioni e cookie per l'autenticazione per impedire il tuo file / servizio contro questo attacco. Il tuo servizio è vulnerabile a falsificazione di richieste cross-site (CSRF).

Se stai usando Node-rosso devi permettere CORS in node-red/settings.js archiviare annunciando le seguenti righe:

// The following property can be used to configure cross-origin resource sharing
// in the HTTP nodes.
// See https://github.com/troygoode/node-cors#configuration-options for
// details on its contents. The following is a basic permissive set of options:
httpNodeCors: {
 origin: "*",
 methods: "GET,PUT,POST,DELETE"
},

186
2017-12-03 20:24



Vorrei che qualcuno condividesse questo sito con me molto tempo fa http://cors.io/ avrebbe risparmiato un sacco di tempo rispetto a costruire e fare affidamento sul mio proxy. Tuttavia, quando passi alla produzione, avere il tuo proxy è la soluzione migliore dal momento che controlli ancora tutti gli aspetti dei tuoi dati.

Tutto ciò di cui hai bisogno:

https://cors.io/?http://HTTP_YOUR_LINK_HERE


142
2017-07-21 22:08



Esiste un problema inter-dominio che utilizza Ajax. Devi essere sicuro che stai accedendo ai tuoi file sullo stesso http:// percorso senza www. (o accesso da http://www. e pubblicare sullo stesso percorso incluso www.) che il browser considera come un altro dominio quando accede tramite a www. percorso, quindi vedi dove si trova il problema. Stai postando in un dominio diverso e il browser blocca il flusso a causa del problema dell'origine.

Se la API non è posizionato sullo stesso host da cui si sta richiedendo, il flusso è bloccato e sarà necessario trovare un altro modo per comunicare con l'API.


61
2018-03-12 08:53



Se stai usando Node.js, Provalo:

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

Maggiori informazioni: CORS su ExpressJS


55
2018-02-12 16:27



Perché
$ .ajax ({tipo: "POST"  - Chiamate OPZIONI 
$ .post ( - Chiamate INVIARE 

entrambe le chiamate Postman sono diverse "POST" correttamente, ma quando le chiamiamo sarà "OPZIONI"

Per i servizi web c #: webapi 

Aggiungi il seguente codice nel tuo file web.config sotto il tag <system.webServer>. Questo funzionerà

<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
    </customHeaders>
</httpProtocol>

Assicurati di non aver commesso errori nella chiamata ajax

jQuery

$.ajax({
    url: 'http://mysite.microsoft.sample.xyz.com/api/mycall',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    type: "POST", /* or type:"GET" or type:"PUT" */
    dataType: "json",
    data: {
    },
    success: function (result) {
        console.log(result);    
    },
    error: function () {
        console.log("error");
    }
});

Problema angolare 4 si prega di fare riferimento: http://www.hubfly.com/blog/solutions/how-to-fix-angular-4-api-call-issues/

Nota: Se stai cercando di scaricare contenuti dal sito Web di terzi poi questo non ti aiuterà. Puoi provare il seguente codice ma non JavaScript.

System.Net.WebClient wc = new System.Net.WebClient();
string str = wc.DownloadString("http://mysite.microsoft.sample.xyz.com/api/mycall");

41
2017-12-13 13:02