Erlauben Sie Access-Control-Allow-Origin-Header mithilfe der HTML5-Abruf-API

Ich verwende die HTML5-Abruf-API.

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

Ich kann normales JSON verwenden, aber die Daten der obigen API-URL nicht abrufen. Es wirft Fehler:

Die Abruf-API kann https://davidwalsh.name/demo/arsenal.json nicht laden . In der angeforderten Ressource ist kein Header 'Access-Control-Allow-Origin' vorhanden. Origin ' http: // localhost ' ist daher kein Zugriff gestattet. Wenn eine undurchsichtige Antwort Ihren Anforderungen entspricht, setzen Sie den Anforderungsmodus auf "no-cors", um die Ressource mit deaktiviertem CORS abzurufen.

Wie Epascarello sagte, muss auf dem Server, auf dem sich die Ressource befindet, CORS aktiviert sein. Was Sie auf der Clientseite tun können (und wahrscheinlich an was Sie denken), ist, den Abrufmodus auf CORS zu setzen (obwohl dies meiner Meinung nach die Standardeinstellung ist):

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

Dies erfordert jedoch weiterhin, dass der Server auch CORS aktiviert und Ihre Domain die Ressource anfordert.

Schauen Sie sich die CORS-Dokumentation und dieses fantastische Udacity-Video an , in dem die Richtlinien für denselben Ursprung erläutert werden .

Sie können auch No-cors Modus auf der Client - Seite verwenden, aber das wird man nur eine undurchsichtige Antwort geben (man den Körper nicht lesen können, aber die Antwort kann noch durch eine API von einem Servicemitarbeiter oder verbrauchen im Cache gespeichert werden, wie <img>) ::

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

Ich hatte meinen Front-End-Code unter http: // localhost: 3000 und meine API (Backend-Code) unter http: // localhost: 5000

Verwendete die Fetch-API, um die API aufzurufen. Anfangs warf es einen "cors" -Fehler. Fügen Sie dann den folgenden Code in meinen Backend-API-Code ein, sodass Ursprung und Header von überall aus möglich sind.

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

Sie sollten jedoch Ihre Herkunft in anderen Umgebungen wie Stage, Prod.

Das hat bei mir funktioniert:

npm install -g local-cors-proxy

API-Endpunkt, den wir anfordern möchten und der CORS-Probleme aufweist:

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

Proxy starten:

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

 Proxy Active 

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

Dann in Ihrem Client-Code neuer API-Endpunkt:

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

Das Endergebnis ist eine Anfrage an https://www.yourdomain.ie/test/list ohne die CORS-Probleme!

Ich weiß, dass dies ein älterer Beitrag ist, aber ich habe festgestellt, dass ich diesen Fehler behoben habe, indem ich die IP-Adresse meines Servers anstelle des Domänennamens in meiner Abrufanforderung verwendet habe. Also zum Beispiel:

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

Wenn Sie Nginx verwenden, versuchen Sie dies

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

Schauen Sie unter https://expressjs.com/en/resources/middleware/cors.html nach. Sie müssen cors verwenden.

Installieren:

$ npm install cors

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

Sie müssen diesen Code in Ihren Knotenserver einfügen.