Brama API CORS: brak nagłówka "Access-Control-Allow-Origin"

Question

Chociaż CORS został skonfigurowany za pomocą bramki API i ustawiony jest nagłówek Access-Control-Allow-Origin, nadal pojawia się następujący komunikat o błędzie podczas próby wywołania API z AJAX w Chrome:

XMLHttpRequest nie może załadować . Na żądanym zasobie nie ma nagłówka "Access-Control-Allow-Origin". Pochodzenie "null" jest zatem niedozwolone. Odpowiedź miała kod stanu HTTP 403.

próbowałem GET URL poprzez Postman i pokazuje powyższy nagłówek jest pomyślnie przeszły:

I od réponse opcje:

Jak mogę połączyć się z interfejsem API z poziomu przeglądarki bez powrotu do JSON-P?

Answer 1

Mam ten sam problem. Użyłem 10 godzin, aby znaleźć.

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

Answer 2

1) muszę zrobić to samo jak @riseres i kilka innych changes.This są 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) A

Zgodnie z tą dokumentacją:

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

podczas korzystania z proxy dla funkcji lambda na API bramy config, pocztą lub uzyskać metody mają żadnych dodatkowych nagłówków, tylko opcje robi. Musisz to zrobić ręcznie w odpowiedzi (odpowiedź serwera lub lambda).

3) A

Poza tym, musiałem wyłączyć opcję „Klucz API wymagany” W mojej metody API bramy pocztowym.

Answer 3

Got moją pracę próbkowania: Właśnie włożona 'Access-Control-Allow-Origin': '*', wewnątrz nagłówki: {} w wygenerowanym nodejs funkcji lambda. Wprowadziłem zmiany no do warstwy API wygenerowanej przez Lambda.

Oto moje 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 mój AJAX wywołanie

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

Answer 4

Jeśli ktoś pracuje w to nadal - udało mi się wyśledzić przyczynę w mojej aplikacji.

Jeśli używasz bramy API z niestandardowymi autoryzatorami - API-Gateway wyśle ​​401 lub 403 z powrotem, zanim trafi na serwer. Domyślnie bramka API NIE jest skonfigurowana dla CORS podczas zwracania 4xx z niestandardowego autoryzatora.

Aby naprawić - w konfiguracji bramki API - przejdź do "Odpowiedzi bramki", rozwiń "Domyślnie 4XX" i dodaj tam nagłówek konfiguracji CORS. tj.

Access-Control-Allow-Origin: '*' 

Pamiętaj o ponownym wdrożeniu bramy - i voila!