API Gateway CORS: Kein Header 'Access-Control-Allow-Origin'

Obwohl CORS über API Gateway eingerichtet wurde und der Access-Control-Allow-OriginHeader festgelegt ist, wird beim Versuch, die API von AJAX in Chrome aus aufzurufen, immer noch die folgende Fehlermeldung angezeigt:

XMLHttpRequest kann http://XXXXX.execute-api.us-west-2.amazonaws.com/beta/YYYYY nicht laden . In der angeforderten Ressource ist kein Header 'Access-Control-Allow-Origin' vorhanden. Origin 'null' ist daher kein Zugriff gestattet. Die Antwort hatte den HTTP-Statuscode 403.

Ich habe versucht, die URL über Postman abzurufen, und es wird angezeigt, dass der obige Header erfolgreich übergeben wurde:

Und aus der Antwort von OPTIONS:

Wie kann ich meine API über den Browser aufrufen, ohne zu JSON-P zurückzukehren?

Ich habe das gleiche Problem. Ich habe 10 Stunden benutzt, um herauszufinden.

https://serverless.com/framework/docs/providers/aws/events/apigateway/

// handler.js

'use strict';

module.exports.hello = function(event, context, callback) {

const response = {
  statusCode: 200,
  headers: {
    "Access-Control-Allow-Origin" : "*", // Required for CORS support to work
    "Access-Control-Allow-Credentials" : true // Required for cookies, authorization headers with HTTPS 
  },
  body: JSON.stringify({ "message": "Hello World!" })
};

callback(null, response);
};

Wenn noch jemand darauf stößt, konnte ich die Grundursache in meiner Anwendung ausfindig machen.

Wenn Sie API-Gateway mit benutzerdefinierten Autorisierern ausführen, sendet API-Gateway einen 401 oder 403 zurück, bevor er tatsächlich auf Ihren Server gelangt. Standardmäßig ist API-Gateway NICHT für CORS konfiguriert, wenn 4xx von einem benutzerdefinierten Autorisierer zurückgegeben wird.

Auch - wenn Sie zufällig einen Statuscode von 0oder 1von einer Anforderung erhalten, die über API Gateway ausgeführt wird, ist dies wahrscheinlich Ihr Problem.

Um dies zu beheben, gehen Sie in der API-Gateway-Konfiguration zu "Gateway-Antworten", erweitern Sie "Standard 4XX" und fügen Sie dort einen CORS-Konfigurationsheader hinzu. dh

Access-Control-Allow-Origin: '*'

Stellen Sie sicher, dass Sie Ihr Gateway erneut bereitstellen - und voila!

1) Ich musste dasselbe tun wie @riseres und einige andere Änderungen. Dies sind meine Antwortheader:

headers: {
            'Access-Control-Allow-Origin' : '*',
            'Access-Control-Allow-Headers':'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token',
            'Access-Control-Allow-Credentials' : true,
            'Content-Type': 'application/json'
        }

2 und

Nach dieser Dokumentation:

http://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html

Wenn Sie in der API-Gateway-Konfiguration einen Proxy für Lambda-Funktionen verwenden, werden den Post- oder Get-Methoden keine zusätzlichen Header hinzugefügt, sondern nur die Optionen. Sie müssen dies manuell in der Antwort tun (Server- oder Lambda-Antwort).

3) Und

Außerdem musste ich die Option "API-Schlüssel erforderlich" in meiner API-Gateway-Post-Methode deaktivieren.

Wenn Sie alles in Bezug auf dieses Problem ohne Erfolg versucht haben, werden Sie dort landen, wo ich es getan habe. Es stellt sich heraus, dass die vorhandenen CORS-Setup-Anweisungen von Amazon einwandfrei funktionieren. Denken Sie daran, die Bereitstellung erneut durchzuführen . Der CORS-Bearbeitungsassistent führt trotz all seiner netten kleinen grünen Häkchen keine Live-Aktualisierungen Ihrer API durch. Vielleicht offensichtlich, aber es hat mich einen halben Tag lang verblüfft.

Haben Sie meine Probe Arbeits: Ich gerade eingefügt 'Access-Control-Allow-Origin': '*', innen Header: {} in der NodeJS Lambda - Funktion erzeugt. Ich habe keine Änderungen an der von Lambda generierten API-Schicht vorgenommen.

Hier ist mein NodeJS:

'use strict';
const doc = require('dynamodb-doc');
const dynamo = new doc.DynamoDB();
exports.handler = ( event, context, callback ) => {
    const done = ( err, res ) => callback( null, {
        statusCode: err ? '400' : '200',
        body: err ? err.message : JSON.stringify(res),
        headers:{ 'Access-Control-Allow-Origin' : '*' },
    });
    switch( event.httpMethod ) {
        ...
    }
};

Hier ist mein AJAX-Anruf

$.ajax({
    url: 'https://x.execute-api.x-x-x.amazonaws.com/prod/fnXx?TableName=x',
    type: 'GET',
    beforeSend: function(){ $( '#loader' ).show();},
    success: function( res ) { alert( JSON.stringify(res) ); },
    error:function(e){ alert('Lambda returned error\n\n' + e.responseText); },
    complete:function(){ $('#loader').hide(); }
});

Für Googler:

Hier ist warum:

• Eine einfache Anfrage oder GET/ POSTohne Cookies löst keinen Preflight aus
• Wenn Sie CORS für einen Pfad zu konfigurieren, API - Gateway wird nur eine erstellen OPTIONSMethode für diesen Pfad, dann senden Allow-OriginHeader mit Mock - Antworten , wenn die Benutzer Anrufe OPTIONS, aber GET/ POSTnicht erhalten Allow-Originautomatisch
• Wenn Sie versuchen, einfache Anforderungen mit aktiviertem CORS-Modus zu senden, wird eine Fehlermeldung angezeigt, da diese Antwort keinen Allow-OriginHeader enthält
• Sie können sich an bewährte Methoden halten. Einfache Anfragen sind nicht dazu gedacht, eine Antwort an den Benutzer zu senden, Authentifizierung / Cookie zusammen mit Ihren Anfragen zu senden, um dies "nicht einfach" zu machen, und Preflight wird ausgelöst
• Für die folgende Anfrage müssen Sie jedoch selbst CORS-Header senden OPTIONS

Etwas zusammenfassen:

• Nur harmlos OPTIONSwird automatisch von API Gateway generiert
• OPTIONSwerden vom Browser nur als Vorsichtsmaßnahme verwendet, um die Möglichkeit von CORS auf einem Pfad zu überprüfen
• Ob CORS akzeptiert wird, hängt von der tatsächlichen Methode ab, z GET.POST
• Sie müssen in Ihrer Antwort manuell die entsprechenden Header senden

Ich habe darin eine einfache Lösung gefunden

API-Gateway> Wählen Sie Ihren API-Endpunkt aus> Wählen Sie die Methode aus (in meinem Fall war es der POST).

Jetzt gibt es ein Dropdown-Menü AKTIONEN> CORS aktivieren. Wählen Sie es aus.

Wählen Sie nun erneut die Dropdown-Liste AKTIONEN> API bereitstellen (erneut bereitstellen).

Es funktionierte !

Ich habe gerade Header zu meiner Lambda-Funktionsantwort hinzugefügt und es hat wie ein Zauber funktioniert

exports.handler = async (event) => {
    const response = {
        statusCode: 200,
        body: JSON.stringify('Hey it works'),
        headers:{ 'Access-Control-Allow-Origin' : '*' }
    };
    return response;
};

Ich habe meine zum Laufen gebracht, nachdem ich festgestellt hatte, dass der Lambda-Autor fehlgeschlagen war und aus einem unbekannten Grund in einen CORS-Fehler übersetzt wurde. Eine einfache Lösung für meinen Autorisierer (und einige Autorisierertests, die ich eigentlich hätte hinzufügen sollen) und es hat funktioniert. Für mich war die API-Gateway-Aktion 'CORS aktivieren' erforderlich. Dadurch wurden alle Header und anderen Einstellungen hinzugefügt, die ich in meiner API benötigte.

Nach dem Ändern Ihrer Funktion oder Ihres Codes Befolgen Sie diese beiden Schritte.

Zuerst aktivieren CORS Dann API bereitstellen jedes Mal.

Bereitstellung des Codes nach Aktivierung von CORS für beide POSTund OPTIONSArbeit für mich.

Für mich war die Antwort, die ENDLICH ARBEITET hat, der Kommentar von James Shapiro aus Alex Rs Antwort (am zweithäufigsten bewertet). Ich bin in erster Linie auf dieses API-Gateway-Problem gestoßen, indem ich versucht habe, eine in S3 gehostete statische Webseite zu erstellen, auf der die Kontaktseite mit Lambda verarbeitet und eine E-Mail gesendet werden kann. Durch einfaches Überprüfen von [] Default 4XX wurde die Fehlermeldung behoben.

Ich laufe aws-serverless-expressund musste in meinem Fall bearbeiten simple-proxy-api.yaml.

Bevor CORS konfiguriert wurde https://example.com, habe ich einfach den Namen meiner Site getauscht und über erneut bereitgestellt npm run setup, und mein vorhandenes Lambda / Stack wurde aktualisiert.

#...
/:
#...
method.response.header.Access-Control-Allow-Origin: "'https://example.com'"
#...
/{proxy+}:
method.response.header.Access-Control-Allow-Origin: "'https://example.com'"
#...

In meinem Fall musste ich, da ich AWS_IAM als Autorisierungsmethode für API Gateway verwendet habe, meine IAM-Rollenberechtigungen erteilen, um den Endpunkt zu erreichen.

Eine weitere Hauptursache für dieses Problem könnte ein Unterschied zwischen HTTP / 1.1 und HTTP / 2 sein.

Symptom: Einige Benutzer, nicht alle, haben bei Verwendung unserer Software einen CORS-Fehler gemeldet.

Problem: Der Access-Control-Allow-OriginHeader fehlte manchmal .

Kontext: Wir hatten ein Lambda eingerichtet, das sich der Bearbeitung von OPTIONSAnfragen und der Beantwortung der entsprechenden CORS-Header widmete , z. B. dem Access-Control-Allow-OriginAbgleichen einer Whitelist Origin.

Lösung: Das API-Gateway scheint alle Header für HTTP / 2-Aufrufe in Kleinbuchstaben umzuwandeln, behält jedoch die Großschreibung für HTTP / 1.1 bei. Dies führte dazu, dass der Zugriff event.headers.originfehlschlug.

Überprüfen Sie, ob Sie auch dieses Problem haben:

Angenommen, Ihre API befindet sich unter https://api.example.comund Ihr Front-End unter https://www.example.com. Stellen Sie mit CURL eine Anfrage über HTTP / 2:

curl -v -X OPTIONS -H 'Origin: https://www.example.com' https://api.example.com

Die Antwortausgabe sollte den Header enthalten:

< Access-Control-Allow-Origin: https://www.example.com

Wiederholen Sie denselben Schritt mit HTTP / 1.1 (oder mit einem Kleinbuchstaben Origin):

curl -v -X OPTIONS --http1.1 -H 'Origin: https://www.example.com' https://api.example.com

Wenn die Access-Control-Allow-OriginKopfzeile fehlt, sollten Sie beim Lesen der OriginKopfzeile die Groß- und Kleinschreibung überprüfen .

Neben anderen Kommentaren sollten Sie auch auf den Status achten, der von Ihrer zugrunde liegenden Integration zurückgegeben wird, und darauf, ob der Header Access-Control-Allow-Origin für diesen Status zurückgegeben wird.

Wenn Sie "CORS aktivieren" ausführen, wird nur der Status 200 festgelegt. Wenn Sie andere auf dem Endpunkt haben, z. B. 4xx und 5xx, müssen Sie den Header selbst hinzufügen.

Manchmal verursacht das Lambda-Timeout einen CORS-Fehler. Sie können das Zeitlimit erhöhen, um das Problem zu beheben. Dies kann das Problem beheben. Es repariert meine.

In meinem Fall habe ich einfach die URL der Abrufanforderung falsch geschrieben. Ein serverless.yml, Sie setzen corsauf true:

register-downloadable-client:
    handler: fetch-downloadable-client-data/register.register
    events:
      - http:
          path: register-downloadable-client
          method: post
          integration: lambda
          cors: true
          stage: ${self:custom.stage}

und dann senden Sie auf dem Lambda-Handler die Header, aber wenn Sie die Abrufanforderung im Frontend falsch machen, erhalten Sie diesen Header nicht in der Antwort und Sie erhalten diesen Fehler. Überprüfen Sie daher Ihre Anforderungs-URL auf der Vorderseite.

In Python können Sie dies wie im folgenden Code tun:

{ "statusCode" : 200,
'headers': 
    {'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': "*"
     },
"body": json.dumps(
    {
    "temperature" : tempArray,
    "time": timeArray
    })
 }