[ajax] API Gateway CORS : ‘Access-Control-Allow-Origin’헤더 없음

Question 1

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를 호출하려면 어떻게해야합니까?

Question 2

나는 같은 문제가 발생합니다. 나는 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);
};

Question 3

다른 사람이 여전히이 문제를 겪고 있다면 응용 프로그램에서 근본 원인을 추적 할 수있었습니다.

사용자 지정 권한 부 여자와 함께 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: '*'

게이트웨이를 다시 배포해야합니다 .

Question 4

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 키 필요’옵션을 비활성화해야했습니다.

Question 5

이 문제에 관한 모든 것을 시도해도 소용이 없다면 내가 한 곳으로 끝날 것입니다. Amazon의 기존 CORS 설정 지침은 정상적으로 작동합니다. 재배포하는 것을 잊지 마십시오 ! CORS 편집 마법사는 작은 녹색 확인 표시가 모두 있어도 API를 실시간으로 업데이트하지 않습니다. 당연한 것 같지만 반나절 동안 나를 괴롭혔다.

Question 6

샘플 작동 : 방금 생성 된 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(); }
});

Question 7

Google 직원 :

그 이유는 다음과 같습니다.

간단한 요청 또는 GET/ POST쿠키가없는 경우 프리 플라이트를 트리거하지 않습니다.
경로에 대한 CORS를 구성하면 API Gateway는 OPTIONS해당 경로에 대한 메서드 만 생성 한 다음 Allow-Origin사용자가 호출 할 때 모의 응답을 사용하여 헤더 를 전송 OPTIONS하지만 GET/ POST는 Allow-Origin자동으로 가져 오지 않습니다.
CORS 모드가 켜진 상태에서 간단한 요청을 보내려고하면 해당 응답에 Allow-Origin헤더 가 없기 때문에 오류가 발생합니다.
모범 사례를 준수 할 수 있습니다. 단순 요청은 사용자에게 응답을 보내는 것이 아니라 인증 / 쿠키를 “간단하지 않은”요청과 함께 전송하고 프리 플라이트가 트리거됩니다.
그래도 다음 요청에 대해 CORS 헤더를 직접 보내야합니다. OPTIONS

그것을 요 약하기:

OPTIONSAPI Gateway에 의해 무해한 것만 자동으로 생성됩니다.
OPTIONS브라우저 에서 경로에서 CORS 가능성 을 확인하기위한 신중한 조치로만 사용됩니다.
CORS 허용 여부 는 실제 방법 (예 : GET/POST
응답에 적절한 헤더를 수동으로 보내야합니다.

Question 8

방금 람다 함수 응답에 헤더를 추가했는데 매력처럼 작동했습니다.

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

[ajax] API Gateway CORS : ‘Access-Control-Allow-Origin’헤더 없음

답변

답변

답변

답변

답변

답변

답변