CORS가 API Gateway를 통해 설정되고 Access-Control-Allow-Origin
헤더가 설정되었지만 Chrome 내 AJAX에서 API를 호출하려고하면 여전히 다음 오류가 발생합니다.
XMLHttpRequest는 http://XXXXX.execute-api.us-west-2.amazonaws.com/beta/YYYYY를 로드 할 수 없습니다 . 요청 된 리소스에 ‘Access-Control-Allow-Origin’헤더가 없습니다. 따라서 Origin ‘null’은 액세스가 허용되지 않습니다. 응답에 HTTP 상태 코드 403이 있습니다.
Postman을 통해 URL을 얻으 려고 시도했는데 위의 헤더가 성공적으로 전달되었음을 보여줍니다.
그리고 OPTIONS 응답에서 :
JSON-P로 되 돌리지 않고 브라우저에서 API를 호출하려면 어떻게해야합니까?
답변
나는 같은 문제가 발생합니다. 나는 10 시간을 사용했다.
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);
};
답변
다른 사람이 여전히이 문제를 겪고 있다면 응용 프로그램에서 근본 원인을 추적 할 수있었습니다.
사용자 지정 권한 부 여자와 함께 API-Gateway를 실행하는 경우 API-Gateway는 실제로 서버에 도달하기 전에 401 또는 403을 다시 보냅니다. 기본적으로 API-Gateway는 사용자 지정 권한 부 여자에서 4xx를 반환 할 때 CORS에 대해 구성되지 않습니다.
또한 -API Gateway를 통해 실행되는 요청에서 상태 코드를 0
받거나 1
받는 경우 이는 아마도 문제 일 수 있습니다.
수정하려면-API Gateway 구성에서- “Gateway Responses”로 이동하여 “Default 4XX”를 확장하고 거기에 CORS 구성 헤더를 추가합니다. 즉
Access-Control-Allow-Origin: '*'
게이트웨이를 다시 배포해야합니다 .
답변
1) @riseres 및 기타 변경 사항과 동일한 작업을 수행해야했습니다. 이것은 내 응답 헤더입니다.
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) 그리고
이 문서에 따르면 :
http://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html
API Gateway 구성에서 람다 함수에 프록시를 사용하는 경우 post 또는 get 메서드에 추가 된 헤더가없고 옵션 만 있습니다. 응답 (서버 또는 람다 응답)에서 수동으로 수행해야합니다.
3) 그리고
그 외에도 API 게이트웨이 게시 방법에서 ‘API 키 필요’옵션을 비활성화해야했습니다.
답변
답변
샘플 작동 : 방금 생성 된 nodejs Lambda 함수의 headers : {} 안에 ‘Access-Control-Allow-Origin’: ‘*’를 삽입했습니다 . 나는하지 아니 람다 생성 된 API 레이어로 변경.
내 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 ) {
...
}
};
다음은 내 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(); }
});
답변
Google 직원 :
그 이유는 다음과 같습니다.
- 간단한 요청 또는
GET
/POST
쿠키가없는 경우 프리 플라이트를 트리거하지 않습니다. - 경로에 대한 CORS를 구성하면 API Gateway는
OPTIONS
해당 경로에 대한 메서드 만 생성 한 다음Allow-Origin
사용자가 호출 할 때 모의 응답을 사용하여 헤더 를 전송OPTIONS
하지만GET
/POST
는Allow-Origin
자동으로 가져 오지 않습니다. - CORS 모드가 켜진 상태에서 간단한 요청을 보내려고하면 해당 응답에
Allow-Origin
헤더 가 없기 때문에 오류가 발생합니다. - 모범 사례를 준수 할 수 있습니다. 단순 요청은 사용자에게 응답을 보내는 것이 아니라 인증 / 쿠키를 “간단하지 않은”요청과 함께 전송하고 프리 플라이트가 트리거됩니다.
- 그래도 다음 요청에 대해 CORS 헤더를 직접 보내야합니다.
OPTIONS
그것을 요 약하기:
OPTIONS
API Gateway에 의해 무해한 것만 자동으로 생성됩니다.OPTIONS
브라우저 에서 경로에서 CORS 가능성 을 확인하기위한 신중한 조치로만 사용됩니다.- CORS 허용 여부 는 실제 방법 (예 :
GET
/POST
- 응답에 적절한 헤더를 수동으로 보내야합니다.
답변
방금 람다 함수 응답에 헤더를 추가했는데 매력처럼 작동했습니다.
exports.handler = async (event) => {
const response = {
statusCode: 200,
body: JSON.stringify('Hey it works'),
headers:{ 'Access-Control-Allow-Origin' : '*' }
};
return response;
};