API Gateway CORS : 'Access-Control-Allow-Origin'헤더 없음

API Gateway CORS : 'Access-Control-Allow-Origin'헤더 없음

---

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

---

람다 작성자가 실패하고 CORS 오류로 변환되는 알 수없는 이유로 인해 작업을 수행했습니다. 내 작성자에 대한 간단한 수정 (그리고 처음에 추가해야하는 일부 작성자 테스트)이 작동했습니다. 나를 위해 API 게이트웨이 작업 'CORS 활성화'가 필요했습니다. 이것은 API에 필요한 모든 헤더 및 기타 설정을 추가했습니다.

---

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

---

In my case, since I was using AWS_IAM as the Authorization method, I needed to grant my IAM role permissions to hit the endpoint.

---

I am running aws-serverless-express, and in my case needed to edit simple-proxy-api.yaml.

Before CORS was configured to https://example.com, I just swapped in my site's name and redeployed via npm run setup, and it updated my existing lambda/stack.

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

---

Another root cause of this problem might be a difference between HTTP/1.1 and HTTP/2.

Symptom: Some users, not all of them, reported to get a CORS error when using our Software.

Problem: The Access-Control-Allow-Origin header was missing sometimes.

Context: We had a Lambda in place, dedicated to handling OPTIONS request and replying with the corresponding CORS headers, such as Access-Control-Allow-Origin matching a whitelisted Origin.

Solution: The API Gateway seems to transform all headers to lower-case for HTTP/2 calls, but maintains capitalization for HTTP/1.1. This caused the access to event.headers.origin to fail.

Check if you're having this issue too:

Assuming your API is located at https://api.example.com, and your front-end is at https://www.example.com. Using CURL, make a request using HTTP/2:

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

The response output should include the header:

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

Repeat the same step using HTTP/1.1 (or with a lowercase Origin header):

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

If the Access-Control-Allow-Origin header is missing, you might want to check case sensitivity when reading the Origin header.

---

제 경우에는 단순히 가져 오기 요청 URL을 잘못 작성했습니다. 에 serverless.yml, 당신은 설정 cors합니다 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}

그런 다음 람다 처리기에서 헤더를 보내지 만 프런트 엔드에서 가져 오기 요청을 잘못하면 응답에서 해당 헤더를 얻지 못하고이 오류가 발생합니다. 따라서 전면에서 요청 URL을 다시 확인하십시오.

---

Python에서는 아래 코드 에서처럼 할 수 있습니다.

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

---

내에서 간단한 해결책을 찾았습니다.

API Gateway> API 엔드 포인트 선택> 방법 선택 (제 경우에는 POST)

이제 드롭 다운 작업> CORS 활성화 .. 선택하십시오.

이제 드롭 다운 작업을 다시 선택> API 배포 (재배포)

작동했습니다!

참고 URL : https://stackoverflow.com/questions/35190615/api-gateway-cors-no-access-control-allow-origin-header