AWS API 게이트웨이에 'Access-Control-Allow-Origin' 헤더가 없습니다.

AWS API 게이트웨이에 'Access-Control-Allow-Origin' 헤더가 없습니다.

API 게이트웨이에 관한 문제로 고민하고 있으며, 이에 대한 다른 SO 답변, AWS 포럼 및 문서도 살펴보았지만 아직 만족할 수 없습니다.

AWS API 게이트웨이를 사용하여 DynamoDB의 테이블을 읽고 쓰는 Lambda 함수를 호출하는 API를 설정하려고 합니다.

DynamoDB에 대한 Lambda 함수는 동작하고 있습니다.AWS에서 API를 만들고 GET 메서드와 OPTIONS 메서드를 만들었습니다.AWS는 GET/POST에만 OPTIONS를 적용하지 않는다고 읽었는데 OPTIONS 메서드가 없을 때 ajax 호출에서 전송 전 오류가 발생하여 추가했습니다.

현재로선 API 키나 인증을 사용하지 않고 있습니다.DynamoDB 테이블의 내용을 반환하는 POSTMAN을 사용하여 GET 메서드를 호출할 수 있습니다.

하지만 JQuery Ajax를 사용하려고 하면

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

네트워크 탭에서 Chrome 개발 도구를 사용하는 것을 볼 수 있습니다. OPTIONS 메서드는 상태 200을 반환하고 GET은 상태 200을 반환하지만 위의 오류가 있습니다.

OPTIONS 메서드와 GET 메서드 모두에서 CORS를 유효하게 해, 변경 때마다 API를 다시 유효하게 해, 다음의 조작을 실시했습니다(http://enable-cors.org/server_awsapigateway.html)). 그러나 콘솔에서는 항상 같은 에러가 발생합니다.

데스크톱의 파일에서 Ajax 콜을 실행하고 있기 때문에 페이지가 JS의 단일 웹 페이지 애플리케이션으로 S3에 전개되므로 오리진은 null입니다.

GET 및 OPTIONS에서 CORS를 활성화하면 Access-Control-Allow-Headers가'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'및 Access-Control-Allow-Origin*은'*'

제 Ajax 전화는 다음과 같습니다.POSTMAN이 사용하는 헤더를 그대로 복사해 보았습니다.이 헤더는 Authorization 헤더가 설정되어 있습니다(AWS에서는 현재 비활성화되어 있습니다).그러나 항상 위의 에러가 발생합니다.

var awsHeaders = {};
awsHeaders['X-Amz-Date'] = '20161127T171734';

$('#add, #cloud').click(function() {

    $.ajax({

        type: 'GET',
        headers: awsHeaders,
        dataType : "json",
        url: '...',
        success: function (res) {

            console.log('response in GET:');
            console.log(res);

        },
        error: function(data) {
            console.log('in error');
            console.log(data);
        }

    });

});

내가 뭘 놓치고 있는지 누가 밝혀줄 수 있나요?

대단히 고맙습니다

업데이트 DigitalKapteain 코멘트에 따라 람다 함수의 응답에 'Access-Control-Allow-Origin' 헤더를 설정하여 이 문제를 해결한 방법에 대한 아래 답변을 참조하십시오.AWS documents에서 찾아봤는데 찾을 수가 없었어요.이 링크는 Lambda와 Lambda Proxy의 차이점을 설명하고 CORS https://serverless.com/framework/docs/providers/aws/events/apigateway/를 사용할 때 수행해야 할 작업을 설명합니다.

GET 에는 GET GET도 되어 있어야 .Access-Control-Allow-Originheadermanager.manager로 .

Digitalkapitaen의 답변은 정확합니다.Lambda에서 HTTP 응답 헤더를 설정하는 방법을 찾는 번거로움을 덜어주는 코드입니다.

exports.handler = function(event, context, callback) {
    callback(null, {
        "statusCode": 200,
        "headers": { 
            "Access-Control-Allow-Origin": "*" 
        }
    });
};

그래도 문제가 해결되지 않으면 $.ajax를 사용하는 경우 json 개체를 JSON.stringify()로 설정하십시오.그렇지 않은 경우에도 CORS 관련 오류라고 생각되는 오류가 반환됩니다.그러나 Postman을 사용하여 동일한 json 객체를 전송하면 요청이 성공합니다.한 번 해봐...

Plask에 @Digitalkapitan의 솔루션을 통합하고 싶은 분들을 위해, 아래 코드는 다음과 같습니다.

app = Flask(__name__)
cors = CORS(app, resources={r"/*": {"origins": "*"}})

@app.route("/")
def helloWorld():
  return "Hello, cross-origin-world!"

다음을 수행하여 플라스크-코어 모듈을 장착하십시오.

pip install -U flask-cors

Words Like Jared answer와 같이 모든 헤더를 교체하는 대신 하나의 헤더만 변경하는 경우.다음 코드를 사용할 수 있습니다.

'use strict';

module.exports.handler = (event, context, callback) => {
  const response = event.Records[0].cf.response;
  const headers = response.headers;

  headers['access-control-allow-origin'] = [{ key: 'Access-Control-Allow-Origin', value: "*" }];

  return callback(null, response);
};

다른 예는 Lambda@Edge 및 Amazon CloudFront를 사용한 HTTP 보안 헤더 추가에서 찾을 수 있습니다.일반 람다 함수에 대해서도 동일하게 작동합니다.

같은 문제가 있었습니다.S3에서 웹사이트를 설정하고 API 게이트웨이에서 ajax 콜을 시도합니다.API 게이트웨이에서 CORS를 활성화하여 배포한 후 람다 코드의 응답 헤더를 설정한 후 동일한 문제가 발생하였습니다.

다음은 제 샘플 람다 코드의 일부입니다.

 let response = {
        statusCode: responseCode,
        headers: {
            "x-custom-header" : "my custom header value",
            "Access-Control-Allow-Origin": "*"
        },
        body: JSON.stringify(responseBody)
    };
    console.log("response: " + JSON.stringify(response))
    return response;

언급URL : https://stackoverflow.com/questions/40832288/aws-api-gateway-no-access-control-allow-origin-header-is-present