Consenti intestazione Access-Control-Allow-Origin utilizzando l'API di recupero HTML5

Sto utilizzando l'API di recupero HTML5.

var request = new Request('https://davidwalsh.name/demo/arsenal.json');

fetch(request).then(function(response) {
    // Convert to JSON
    return response.json();
}).then(function(j) {
    // Yay, `j` is a JavaScript object
    console.log(JSON.stringify(j));
}).catch(function(error) {
    console.log('Request failed', error)
});

Sono in grado di utilizzare json normale ma non sono in grado di recuperare i dati dell'URL API di cui sopra. Genera errore:

Fetch API non può caricare https://davidwalsh.name/demo/arsenal.json . Nessuna intestazione "Access-Control-Allow-Origin" è presente sulla risorsa richiesta. L'accesso all'origine " http: // localhost " non è pertanto consentito. Se una risposta opaca soddisfa le tue esigenze, imposta la modalità della richiesta su "no-cors" per recuperare la risorsa con CORS disabilitato.

Come ha detto epascarello, il server che ospita la risorsa deve avere CORS abilitato. Quello che puoi fare sul lato client (e probabilmente quello a cui stai pensando) è impostare la modalità di recupero su CORS (sebbene questa sia l'impostazione predefinita, credo):

fetch(request, {mode: 'cors'});

Tuttavia, ciò richiede ancora che il server abiliti anche CORS e consenta al tuo dominio di richiedere la risorsa.

Guarda la documentazione CORS e questo fantastico video di Udacity che spiega la politica della stessa origine .

Puoi anche utilizzare la modalità no-cors sul lato client, ma questo ti darà solo una risposta opaca (non puoi leggere il corpo, ma la risposta può ancora essere memorizzata nella cache da un addetto all'assistenza o consumata da alcune API, come <img>) :

fetch(request, {mode: 'no-cors'})
.then(function(response) {
  console.log(response); 
}).catch(function(error) {  
  console.log('Request failed', error)  
});

Avevo il mio codice front-end in esecuzione in http: // localhost: 3000 e la mia API (codice backend) in esecuzione in http: // localhost: 5000

Utilizzava l'API di recupero per chiamare l'API. Inizialmente, stava lanciando l'errore "cors". Quindi ho aggiunto questo codice sotto nel mio codice API backend, consentendo origine e intestazione da qualsiasi luogo.

let allowCrossDomain = function(req, res, next) {
  res.header('Access-Control-Allow-Origin', "*");
  res.header('Access-Control-Allow-Headers', "*");
  next();
}
app.use(allowCrossDomain);

Tuttavia dovresti limitare le tue origini in caso di altri ambienti come stage, prod.

Questo ha funzionato per me:

npm install -g local-cors-proxy

Endpoint API che vogliamo richiedere con problemi CORS:

https://www.yourdomain.com/test/list

Avvia proxy:

lcp --proxyUrl https://www.yourdomain.com

 Proxy Active 

 Proxy Url: http://www.yourdomain.com:28080
 Proxy Partial: proxy
 PORT: 8010

Quindi nel codice client, nuovo endpoint API:

http://localhost:8010/proxy/test/list

Il risultato finale sarà una richiesta a https://www.tuodominio.ie/test/list senza i problemi CORS!

So che questo è un post precedente, ma ho scoperto che ciò che ha funzionato per me per correggere questo errore è stato l'utilizzo dell'indirizzo IP del mio server invece di utilizzare il nome di dominio nella mia richiesta di recupero. Quindi per esempio:

#(original) var request = new Request('https://davidwalsh.name/demo/arsenal.json');
#use IP instead
var request = new Request('https://0.0.0.0/demo/arsenal.json');

fetch(request).then(function(response) {
    // Convert to JSON
    return response.json();
}).then(function(j) {
    // Yay, `j` is a JavaScript object
    console.log(JSON.stringify(j));
}).catch(function(error) {
    console.log('Request failed', error)
});

Se usi nginx prova questo

#Control-Allow-Origin access

    # Authorization headers aren't passed in CORS preflight (OPTIONS) calls. Always return a 200 for options.
    add_header Access-Control-Allow-Credentials "true" always;
    add_header Access-Control-Allow-Origin "https://URL-WHERE-ORIGIN-FROM-HERE " always;
    add_header Access-Control-Allow-Methods "GET,OPTIONS" always;
    add_header Access-Control-Allow-Headers "x-csrf-token,authorization,content-type,accept,origin,x-requested-with,access-control-allow-origin" always;

    if ($request_method = OPTIONS ) {
        return 200;
    }

È necessario impostare l'intestazione cors sul lato server da cui si richiedono i dati. Ad esempio, se il tuo server di backend è in Ruby on rails, usa il seguente codice prima di inviare la risposta. Le stesse intestazioni dovrebbero essere impostate per qualsiasi server di backend.

headers['Access-Control-Allow-Origin'] = '*'
headers['Access-Control-Allow-Methods'] = 'POST, PUT, DELETE, GET, OPTIONS'
headers['Access-Control-Request-Method'] = '*'
headers['Access-Control-Allow-Headers'] = 'Origin, X-Requested-With, Content-Type, Accept, Authorization'

Guarda https://expressjs.com/en/resources/middleware/cors.html Devi usare cors.

Installare:

$ npm install cors

const cors = require('cors');
app.use(cors());

Devi mettere questo codice nel tuo server del nodo.