API Gateway CORS: brak nagłówka „Access-Control-Allow-Origin”

Chociaż CORS został skonfigurowany za pośrednictwem API Gateway i ustawiono Access-Control-Allow-Originnagłówek, nadal otrzymuję następujący błąd podczas próby wywołania interfejsu API z AJAX w przeglądarce Chrome:

XMLHttpRequest nie może załadować http://XXXXX.execute-api.us-west-2.amazonaws.com/beta/YYYYY . Żądany zasób nie zawiera nagłówka „Access-Control-Allow-Origin”. W związku z tym źródło „null” nie ma dostępu. Odpowiedź miała kod stanu HTTP 403.

Próbowałem uzyskać adres URL przez Postman i pokazuje, że powyższy nagłówek został pomyślnie przekazany:

A z odpowiedzi OPCJE:

Jak mogę wywołać mój interfejs API z przeglądarki bez powrotu do JSON-P?

Mam ten sam problem. Wykorzystałem 10 godzin, aby się dowiedzieć.

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

Jeśli ktoś jeszcze korzysta z tego nadal - udało mi się wyśledzić główną przyczynę w mojej aplikacji.

Jeśli korzystasz z API-Gateway z niestandardowymi autoryzatorami - API-Gateway odeśle 401 lub 403 z powrotem, zanim faktycznie trafi na twój serwer. Domyślnie - API-Gateway NIE jest skonfigurowane dla CORS podczas zwracania 4xx od niestandardowego autoryzatora.

Ponadto - jeśli zdarza się, że otrzymujesz kod stanu z 0lub 1z żądania przechodzącego przez API Gateway, prawdopodobnie jest to twój problem.

Aby to naprawić - w konfiguracji API Gateway przejdź do „Gateway Responses”, rozwiń „Default 4XX” i dodaj tam nagłówek konfiguracji CORS. to znaczy

Access-Control-Allow-Origin: '*'

Pamiętaj, aby ponownie wdrożyć swoją bramę - i voila!

1) Musiałem zrobić to samo co @riseres i kilka innych zmian, oto moje nagłówki odpowiedzi:

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) I

Zgodnie z tą dokumentacją:

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

Gdy używasz serwera proxy dla funkcji lambda w konfiguracji bramy API, metody post lub get nie mają dodanych nagłówków, tylko opcje. Musisz to zrobić ręcznie w odpowiedzi (odpowiedź serwera lub lambda).

3) I

Poza tym musiałem wyłączyć opcję `` Wymagany klucz API '' w mojej metodzie wysyłania bramy API.

Jeśli wypróbowałeś wszystko w tym problemie bezskutecznie, skończysz tam, gdzie ja. Okazuje się, że istniejące wskazówki dotyczące konfiguracji CORS firmy Amazon działają dobrze ... po prostu pamiętaj o ponownym wdrożeniu ! Kreator edycji CORS, nawet ze wszystkimi ładnymi małymi zielonymi znacznikami, nie aktualizuje na żywo twojego API. Być może oczywiste, ale zszokowało mnie to na pół dnia.

Moja próbka działa: właśnie wstawiłem „Access-Control-Allow-Origin”: „*”, wewnątrz nagłówków: {} w wygenerowanej funkcji Lambda nodejs. Nie wprowadziłem żadnych zmian w warstwie API generowanej przez Lambda.

Oto mój 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 ) {
        ...
    }
};

Oto moja rozmowa AJAX

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

Dla pracowników Google:

Oto dlaczego:

• Proste żądanie lub GET/ POSTbez plików cookie nie powoduje uruchomienia inspekcji wstępnej
• Podczas konfigurowania CORS dla ścieżki API Gateway utworzy tylko OPTIONSmetodę dla tej ścieżki, a następnie wyśle Allow-Originnagłówki przy użyciu fałszywych odpowiedzi, gdy wywoła użytkownika OPTIONS, ale GET/ POSTnie zostanie Allow-Originautomatycznie
• Jeśli spróbujesz wysłać proste żądania z włączonym trybem CORS, pojawi się błąd, ponieważ ta odpowiedź nie ma Allow-Originnagłówka
• Możesz stosować się do najlepszych praktyk, proste żądania nie mają na celu wysyłania odpowiedzi do użytkownika, wysyłania uwierzytelniania / plików cookie wraz z żądaniami, aby uczynić to „nie prostym”, a inspekcja wstępna uruchomi
• Mimo to będziesz musiał samodzielnie wysłać nagłówki CORS dla następującego żądania OPTIONS

Podsumowując:

• Tylko nieszkodliwe OPTIONSbędą automatycznie generowane przez API Gateway
• OPTIONSsą używane przez przeglądarkę tylko jako środek ostrożności do sprawdzenia możliwości CORS na ścieżce
• To, czy CORS jest akceptowany, zależy od rzeczywistej metody, np. GET/POST
• W odpowiedzi musisz ręcznie wysłać odpowiednie nagłówki

Właśnie dodałem nagłówki do mojej odpowiedzi funkcji lambda i zadziałało to jak urok

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

Wewnątrz znalazłem proste rozwiązanie

API Gateway> Select your API endpoint> Select the method (w moim przypadku był to POST)

Teraz jest menu rozwijane DZIAŁANIA> Włącz CORS .. wybierz to.

Teraz ponownie wybierz listę rozwijaną CZYNNOŚCI> Wdróż API (wdróż go ponownie)

Zadziałało !

Zacząłem działać po tym, jak zdałem sobie sprawę, że autoryzator lambda zawodzi iz jakiegoś nieznanego powodu został przetłumaczony na błąd CORS. Prosta poprawka do mojego autoryzatora (i kilka testów autoryzacyjnych, które powinienem był dodać w pierwszej kolejności) i zadziałało. Dla mnie była wymagana akcja bramy API „Włącz CORS”. To dodało wszystkie nagłówki i inne ustawienia, których potrzebowałem w moim API.

Dla mnie odpowiedzią, która WRESZCIE DZIAŁAŁ, był komentarz Jamesa Shapiro z odpowiedzi Alexa R (druga pod względem popularności). Wpadłem w ten problem z bramą API w pierwszej kolejności, próbując uzyskać statyczną stronę internetową hostowaną w S3, aby użyć lambda do przetworzenia strony kontaktowej i wysłania wiadomości e-mail. Po prostu zaznaczenie [] Default 4XX naprawiło komunikat o błędzie.

Po zmianie funkcji lub kodu Wykonaj te dwa kroki.

Najpierw włącz CORS, a następnie wdrażaj interfejs API za każdym razem.

Wdrażanie kodu po włączeniu CORS dla obu POSTi OPTIONSdziałało dla mnie.

Biegam aws-serverless-express, aw moim przypadku potrzebne do edycji simple-proxy-api.yaml.

Przed skonfigurowaniem CORS-a po https://example.comprostu zamieniłem nazwę mojej witryny i ponownie wdrożyłem za pośrednictwem npm run setup, a także zaktualizowałem moją istniejącą lambdę / stos.

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

W moim przypadku, ponieważ używałem AWS_IAM jako metody autoryzacji dla API Gateway, musiałem przyznać mojej roli IAM uprawnienia do trafienia w punkt końcowy.

Inną główną przyczyną tego problemu może być różnica między protokołami HTTP / 1.1 i HTTP / 2.

Objaw: Niektórzy użytkownicy, nie wszyscy, zgłaszali wystąpienie błędu CORS podczas korzystania z naszego oprogramowania.

Problem:Access-Control-Allow-Origin nagłówek brakowało czasami .

Kontekst: Mieliśmy Lambda na miejscu, przeznaczoną do obsługi OPTIONSżądań i odpowiadania z odpowiednimi nagłówkami CORS, takimi jak Access-Control-Allow-Origindopasowywanie do białej listy Origin.

Rozwiązanie: Brama interfejsu API wydaje się przekształcać wszystkie nagłówki na małe litery dla wywołań HTTP / 2, ale zachowuje wielkość liter w przypadku protokołu HTTP / 1.1. To spowodowało dostęp doevent.headers.origin to niepowodzenie .

Sprawdź, czy też masz ten problem:

Zakładając, że Twój interfejs API znajduje się pod adresem https://api.example.com, a interfejs użytkownika jest pod adresem https://www.example.com. Używając CURL, wyślij żądanie za pomocą HTTP / 2:

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

Wynik odpowiedzi powinien zawierać nagłówek:

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

Powtórz ten sam krok, używając protokołu HTTP / 1.1 (lub z małym Originnagłówkiem):

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

Jeśli Access-Control-Allow-Originbrakuje nagłówka, możesz chcieć sprawdzić wielkość liter podczas czytania Originnagłówka.

Oprócz innych komentarzy, należy zwrócić uwagę na stan zwrócony z podstawowej integracji i czy dla tego statusu zostanie zwrócony nagłówek Access-Control-Allow-Origin.

Wykonanie czynności „Włącz CORS” powoduje ustawienie tylko 200 statusu. Jeśli masz inne punkty końcowe, np. 4xx i 5xx, musisz samodzielnie dodać nagłówek.

W moim przypadku po prostu wpisałem nieprawidłowy adres URL żądania pobrania. On serverless.ymlmożna ustawić corsna 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}

a następnie w module obsługi lambda wysyłasz nagłówki, ale jeśli wykonasz błędne żądanie pobierania na interfejsie użytkownika, nie otrzymasz tego nagłówka w odpowiedzi i otrzymasz ten błąd. Dlatego dokładnie sprawdź adres URL swojego żądania z przodu.

W Pythonie możesz to zrobić jak w poniższym kodzie:

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