jquery - flask crossdomain




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

Questa non è una correzione per la produzione o quando l'applicazione deve essere mostrata al client, questo è utile solo quando lo sviluppo dell'interfaccia utente e del backend sono su server diversi 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 )

Abilita questa estensione ogni volta che vuoi consentire l'accesso a nessuna richiesta di intestazione 'access-control-allow-origin' .

O

In Windows, incolla questo comando nella finestra di esecuzione

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

questo aprirà un nuovo browser Chrome che consente l'accesso a nessuna richiesta di intestazione 'access-control-allow-origin' .

Sto cercando di fare l'autorizzazione usando JavaScript connettendomi API RESTful costruita in Flask . Tuttavia, quando faccio la richiesta, ottengo il seguente errore:

XMLHttpRequest non può caricare 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 Postman Chrome?

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

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

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

Avviso: questo contiene un problema di sicurezza per il 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 servizio è vulnerabile alla falsificazione di richieste tra siti (CSRF).

Se stai usando Node-red devi permettere a CORS nel file node-red/settings.js di non commentare 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"
},

Domanda popolare - Un'altra cosa da guardare se hai letto fino ad ora e nient'altro ha aiutato. Se si dispone di un CDN come Akamai, Limelight o simile, è possibile controllare la chiave di cache che si ha per l'URI della risorsa. Se non include il valore dell'intestazione Origin, è possibile che venga restituita una risposta nella cache quando richiesto da un'altra origine. Abbiamo appena trascorso mezza giornata a eseguire il debug di questo. La configurazione CDN è stata aggiornata per includere solo il valore Origin per alcuni domini selezionati che sono nostri e impostarlo su null per tutti gli altri. Questo sembra funzionare e consente ai browser dei nostri domini conosciuti di visualizzare le nostre risorse. Certamente tutte le altre risposte sono prerequisiti per arrivare qui, ma se il CDN è il primo salto dal tuo browser questo è qualcosa da rivedere.

Nel nostro caso abbiamo potuto vedere alcune richieste che lo hanno reso al nostro servizio, ma non il volume che il sito stava inviando. Questo ci ha indirizzato verso il CDN. Siamo stati in grado di tornare indietro e vedere la richiesta originale è stata fornita da una richiesta diretta, non parte di una chiamata AJAX del browser e l'intestazione di risposta Access-Control-Allow-Origin non è stata inclusa. Apparentemente il CDN ha memorizzato questo valore. Il tweak della configurazione CDN di Akamai per considerare il valore dell'intestazione della richiesta Origin come parte della corrispondenza sembra averlo fatto funzionare per noi.


Esiste un problema inter-dominio che utilizza Ajax. Devi essere sicuro che stai accedendo ai tuoi file sullo stesso http:// percorso senza www. (o accedere da http://www. e postare allo stesso percorso, incluso www. ) che il browser considera come un altro dominio quando accede tramite 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 l' API non è posizionata sullo stesso host da cui si richiede, il flusso viene bloccato e sarà necessario trovare un altro modo per comunicare con l'API.


In base alla risposta di shruti , ho creato una scorciatoia del browser Chrome con gli argomenti necessari:


Nel mio caso stavo usando l'applicazione JEE-JEE J e i seguenti trucchi hanno funzionato perfettamente per me:

@GET
    @Path("{id}")
    public Response getEventData(@PathParam("id") String id) throws FileNotFoundException {
        InputStream inputStream = getClass().getClassLoader().getResourceAsStream("/eventdata/" + id + ".json");
        JsonReader jsonReader = Json.createReader(inputStream);
        return Response.ok(jsonReader.readObject()).header("Access-Control-Allow-Origin", "*").build();
    }

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

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

Angolare 4 problema per favore riferirsi: http://www.hubfly.com/blog/solutions/how-to-fix-angular-4-api-call-issues/

Nota: se stai cercando di scaricare contenuti da siti Web di terze parti, 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");

Prova XDomain ,

Riepilogo: Una pura alternativa CORS JavaScript / polyfill. Non è richiesta alcuna configurazione del server - basta aggiungere un proxy.html sul dominio con cui si desidera comunicare. Questa libreria utilizza XHook per agganciare tutti gli XMLHttpRequest , quindi XDomain dovrebbe funzionare in combinazione con qualsiasi libreria.


Se non vuoi:

  1. Disattiva la sicurezza Web in Chrome
  2. Usa JSONP
  3. Utilizzare un sito di terze parti per reindirizzare le richieste

e sei sicuro che il tuo server ha abilitato CORS allora (prova CORS qui: http://www.test-cors.org/ )

Quindi devi passare il parametro di origine con la tua richiesta. Questa origine DEVE corrispondere all'origine che il tuo browser invia con la tua richiesta.

Puoi vederlo in azione qui: http://www.wikibackpacker.com/app/detail/Campgrounds/3591

La funzionalità di modifica invia una richiesta GET e POST a un dominio diverso per il recupero dei dati. Ho impostato il parametro di origine che risolve il problema. Il back-end è un motore mediaWiki.

tldr: aggiungi il parametro "origine" alle tue chiamate che deve essere il parametro Origin che il tuo browser invia (non puoi spoofare il parametro di origine)


Se ricevi questo messaggio di errore dal browser:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '…' is therefore not allowed access

quando stai tentando di eseguire una richiesta POST / GET Ajax su un server remoto che è fuori dal tuo controllo, ti preghiamo di dimenticare questa semplice soluzione:

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

È davvero necessario, soprattutto se si utilizza JavaScript solo per eseguire la richiesta Ajax, un proxy interno che accetta la query e la invia al server remoto.

Prima nel tuo codice JavaScript, fai una chiamata Ajax al tuo server, qualcosa del tipo:

$.ajax({
    url: yourserver.com/controller/proxy.php,
    async: false,
    type: "POST",
    dataType: "json",
    data: data,
    success: function (result) {
        JSON.parse(result);
    },
    error: function (xhr, ajaxOptions, thrownError) {
        console.log(xhr);
    }
});

Quindi, crea un semplice file PHP chiamato proxy.php per avvolgere i tuoi dati POST e aggiungerli al server URL remoto come parametri. Ti faccio un esempio di come bypassare questo problema con l'API di ricerca hotel Expedia:

if (isset($_POST)) {
  $apiKey = $_POST['apiKey'];
  $cid = $_POST['cid'];
  $minorRev = 99;

  $url = 'http://api.ean.com/ean-services/rs/hotel/v3/list?' . 'cid='. $cid . '&' . 'minorRev=' . $minorRev . '&' . 'apiKey=' . $apiKey;

  echo json_encode(file_get_contents($url));
 }

Facendo:

echo json_encode(file_get_contents($url));

Stai facendo la stessa query, ma sul lato server e dopo, dovrebbe funzionare bene.

Rispondi copiato e incollato da NizarBsb


Se si utilizza Entity Framework , sembra che a volte questo errore venga generato anche se CORS abilitato. Ho capito che l'errore si è verificato a causa della mancata finalizzazione della query. Spero che questo aiuti gli altri nella stessa situazione.

Il seguente codice può lanciare XMLHttpRequest cannot load http://myApiUrl/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. XMLHttpRequest cannot load http://myApiUrl/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. errore:

using (DBContext db = new DBContext())
{
    return db.Customers.Select(x => new
    {
        Name = x.Name,
        CustomerId = x.CustomerId,
    });
}

Per risolvere il problema, è necessaria una chiamata di finalizzazione come .ToList() o .FirstOrDefault() alla fine della query, in questo modo:

using (DBContext db = new DBContext())
{
    return db.Customers.Select(x => new
    {
        Name = x.Name,
        CustomerId = x.CustomerId,
    }).ToList();
}

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

Ulteriori informazioni: CORS su ExpressJS


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


https://github.com/Rob--W/cors-anywhere/ fornisce il codice (Node.js) che puoi utilizzare per configurare ed eseguire il tuo proxy CORS. È mantenuto attivamente e offre una serie di funzionalità per il controllo del comportamento del proxy oltre al semplice invio delle intestazioni di risposta Access-Control-* corrette.

developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS ha dettagli per spiegare come i browser gestiscono le richieste di origine incrociata che le applicazioni Web lato client fanno da JavaScript e quali intestazioni è necessario configurare l'invio di il server a cui è stata fatta la richiesta, se possibile.

Nel caso in cui un sito a cui è necessario effettuare una richiesta e ricevere una risposta non restituisca l'intestazione di risposta Access-Control-Allow-Origin , i browser bloccheranno sempre le richieste di origine incrociata inviate direttamente dal client codice JavaScript da lavorare. Pertanto, se il sito non è quello che controlli e puoi configurare il comportamento, l'unica cosa che funzionerà in quel caso è il proxy delle richieste, sia attraverso il tuo proxy che te stesso o attraverso un proxy aperto.

Come menzionato in altri commenti qui, ci sono buone ragioni per non fidarsi di un proxy aperto con le tue richieste. Detto questo, se sai cosa stai facendo e decidi che un proxy aperto funziona per le tue esigenze, https://cors-anywhere.herokuapp.com/ è affidabile, mantenuto attivamente e che esegue un'istanza del https://github.com/Rob--W/cors-anywhere/ code.

Come con altri proxy aperti menzionati qui (un paio dei quali almeno non sembrano essere più disponibili), il modo in cui funziona è che invece di inviare il codice client direttamente a una richiesta, ad es. http://foo.com lo invii a https://cors-anywhere.herokuapp.com/http://foo.com e il proxy aggiunge le intestazioni necessarie di Access-Control-* alla risposta che il browser vede.


Nessuna intestazione 'Access-Control-Allow-Origin' è presente sulla risorsa richiesta. Non è quindi consentito l'accesso a " https://sx.xyz.com ".

Ho anche affrontato un problema simile con Cross Domain Data Exchange nella risposta Ajax come errore indefinito . Ma la risposta nell'intestazione era Codice di stato: 200 OK

Failed to load https://www.Domain.in/index.php?route=api/synchronization/checkapikey:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'https://sx.xyz.in' is therefore not allowed access.

La soluzione per aggirare il problema: nel mio caso si trattava di chiamare la funzione checkapikey () tramite Ajax a un altro dominio e ottenere la risposta con i dati a cui è stata effettuata la chiamata:

if (($this->request->server['REQUEST_METHOD'] == 'POST') && isset($this->request->server['HTTP_ORIGIN'])) {

        $this->response->addHeader('Access-Control-Allow-Origin: ' . $this->request->server['HTTP_ORIGIN']);
        $this->response->addHeader('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
        $this->response->addHeader('Access-Control-Max-Age: 1000');
        $this->response->addHeader('Access-Control-Allow-Credentials: true');
        $this->response->addHeader('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');

        $headers = getallheaders();
...
}

CORS è per te.

CORS è "Cross Origin Resource Sharing" ed è un modo per inviare una richiesta interdominio. Ora XMLHttpRequest2 e Fetch API supportano entrambi CORS.

Ma ha i suoi limiti. Il server deve richiedere in modo specifico Access-Control-Allow-Origin e non può essere impostato su "*".

E se vuoi che qualsiasi origine ti possa inviare una richiesta, devi JSONP (devi anche impostare Access-Control-Allow-Origin , ma può essere '*').

Per un sacco di modalità di richiesta se non sai cosa scegliere, penso che hai bisogno di un componente completamente funzionale per farlo. Permettetemi di introdurre un semplice componente catta

Se si utilizza un browser moderno (> Internet Explorer9, Chrome, Firefox, Edge, ecc.), Si consiglia di utilizzare un componente semplice, ma bello, catta . Non ha dipendenze, è inferiore a 3 KB e supporta Fetch, Ajax e JSONP con la stessa sintassi e opzioni semplici.

catta('./data/simple.json').then(function (res) {
  console.log(res);
});

Supporta anche tutto il modo di importare nel tuo progetto, come il modulo ES6, CommonJS e persino <script>in HTML.


Sul mio sito web (basato su .NET) ho appena aggiunto questo:

<system.webServer>
 <httpProtocol>  
    <customHeaders>  
     <add name="Access-Control-Allow-Origin" value="*" />  
     <add name="Access-Control-Allow-Headers" value="Content-Type" />  
     <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />  
    </customHeaders>  
  </httpProtocol>         
</system.webServer>

Grazie mille a this video.


Forse è un po 'complicato ma puoi usare un server web per indirizzare la richiesta. Con nodejs non hai questo problema. Non sono un esperto nel nodo js. Quindi non so se questo è un codice pulito.

Ma questo funziona per me

Ecco un piccolo esempio:

NODO JS

var rp = require('request-promise');
var express = require('express'),
    app = express(),
    port = process.env.PORT || 3000;
var options = {
    method: 'POST',
    uri: 'http://api.posttestserver.com/post',
    body: {
        some: 'payload'
    },
    json: true // Automatically stringifies the body to JSON
};
app.get('/', function (req, res) {
        rp(options)
        .then(function (parsedBody) {
            res.send(parsedBody)
        })
        .catch(function (err) {
            res.send(err)
        });
});
app.listen(port);

JS

axios.get("http://localhost:3000/").then((res)=>{
    console.log('================res====================');
    console.log(res);
    console.log('====================================');
})

Molte volte questo mi succede da javascript al mio php api, perché uno dei pochi motivi. Ho dimenticato di mettere il <?php header('Access-Control-Allow-Origin: *'); ?è uno. Questo è utile per l'accesso al dominio secondario. Un altro motivo è che nella richiesta jQuery ajax sto specificando uno specifico dataType e restituendo un diverso dataType, quindi genera un errore.

L'ultimo e più importante ragionamento per questo errore è che c'è un errore di analisi sulla pagina che stai richiedendo. Se si preme l'URL della pagina nel browser piuttosto che probabilmente si vedrà un errore di analisi e si avrà un numero di riga per risolvere il problema.

Spero che questo aiuti qualcuno. Mi ci è voluto un po 'ogni volta per eseguire il debug di questo e vorrei avere una lista di cose da verificare.


Per completezza, Apache consente cors:

Header set Access-Control-Allow-Origin "http://www.allowonlyfromthisurl.com"
Header set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header set Access-Control-Max-Age "1000"
Header set Access-Control-Allow-Headers "x-requested-with, Content-Type, Accept-Encoding, Accept-Language, Cookie, Referer"




flask-restless