AWS API 網關不存在“Access-Control-Allow-Origin”標頭

Question

我遇到了 API 網關的問題，我已經瀏覽了所有其他關於此的 SO 答案，AWS 論壇並瀏覽了他們的文檔，但仍然沒有任何樂趣。

我正在嘗試使用 AWS API 網關設置 API，該網關調用 Lambda 函數，該函數讀取/寫入 DynamoDB 中的表。

DynamoDB 的 Lambda 函數正在運行。 我在 AWS 中創建了一個 API，並為它創建了一個 GET 和 OPTIONS 方法。 我讀到 AWS 並沒有僅對 GET/POST 強制執行 OPTIONS，但是當沒有 OPTIONS 方法時，我在 ajax 調用中遇到了一個預檢錯誤，所以我添加了一個。

現在只是為了取得進展，我沒有使用 API 密鑰或授權。 我可以使用 POSTMAN 成功調用我的 GET 方法，該方法返回 DynamoDB 表的內容。

但是當我嘗試使用 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 調用，因此 origin 為空，因為該頁面將作為 JS 中的單個網頁應用程序部署到 S3。

當我在 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 評論解決此問題的答案 - 通過在我的 Lambda 函數的響應中設置 'Access-Control-Allow-Origin':'*' 標頭。 我在 AWS 文檔中尋找過這個，但找不到； 此鏈接描述了 Lambda 和 Lambda 代理之間的區別，並解釋了使用 CORS 時的操作https://serverless.com/framework/docs/providers/aws/events/apigateway/

Answer 1

對 Lambda 函數的 GET 請求的響應還必須包含Access-Control-Allow-Origin標頭。

Answer 2

Digitalkapitaen 的回答是正確的； 下面的代碼可以省去查找如何在 Lambda 中設置 HTTP 響應標頭的麻煩：

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

Answer 3

如果這仍然不適合您，如果您使用 $.ajax，請確保 JSON.stringify() 您的 json 對象。 如果沒有，您仍然會收到一個聲稱是 CORS 相關錯誤的錯誤。 但是如果你使用 Postman 發送相同的 json 對象，請求就會成功。 試試看...

Answer 4

對於希望在 Flask 中集成 @Digitalkapitaen 的解決方案的人，這里是下面的代碼：

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

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

通過執行以下操作安裝flask-cors模塊：

pip install -U flask-cors

Answer 5

如果您只想更改一個標題而不是替換所有標題，如Words Like Jared答案中所示。 您可以使用此代碼：

'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 安全標頭中找到另一個示例。 對於普通的 Lambda 函數，它的工作原理相同。

Answer 6

我遇到了同樣的問題：在 S3 中配置了一個網站並嘗試在 API 網關中進行 ajax 調用。 在 API 網關中啟用和部署 CORS 並得到同樣的問題，在 Lambda 代碼中設置響應頭后問題得到解決。

這是我的示例 Lambda 代碼的片段：

 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;