CORS 錯誤，API 網關和 Lambda **僅**使用代理集成時

Question

我正在嘗試根據來自 API 網關的發布請求使用 Lambda 向 DynamoDB 添加一個項目。

這是我的 Lambda 代碼的樣子：

var AWS = require('aws-sdk');
var dynamoDB = new AWS.DynamoDB();

exports.handler = (event, context, callback) => {
var temp_id = "1";
var temp_ts = Date.now().toString();
var temp_calc = event['params']['calc'];

var params = {
    TableName:"calc-store",
    Item: {
        Id: {
            S: temp_id
        },
        timestamp: {
            S: temp_ts
        },
        calc: {
            S: temp_calc
        }
    }
};
dynamoDB.putItem(params,callback);


const response = {
    statusCode: 200,
    headers: {
        'content-type': 'application/json',
        'Access-Control-Allow-Origin': '*' 
    },
    body: event['params']['calc']
};

callback(null, response); 
};

這就是我從客戶那里呼叫 function 的方式

axios.post(apiURL, {params:{calc:calc}})
.then ((res) => {
  console.log(res);
})

我在我的 API 網關上啟用了 CORS 超過 30 次，我還通過向響應添加標頭來仔細檢查。 但無論我做什么，我都會收到 CORS 錯誤，出於某種原因，在我的回復中，我可以看到沒有附加“Access-Control-Allow-Origin”header。

POST https://egezysuta5.execute-api.us-east-1.amazonaws.com/TEST 502
localhost/:1 Failed to load https://egezysuta5.execute-api.us-east- 
1.amazonaws.com/TEST: No 'Access-Control-Allow-Origin' header is 
present on the requested resource. Origin 'http://localhost:3000' is 
therefore not 
allowed access. The response had HTTP status code 502.
createError.js:17 Uncaught (in promise) Error: Network Error
at createError (createError.js:17)
at XMLHttpRequest.handleError (xhr.js:87)

我嘗試不使用 Lambda 代理集成，然后它起作用了，但是，我無法訪問我傳遞的參數。

編輯：在這上面花了幾個小時之后，這就是我將問題歸結為的原因。 我的客戶正在向 OPTIONS 發出成功的飛行前請求。 OPTIONS 成功返回正確的 CORS 標頭，但由於某種原因，這些標頭沒有傳遞到我的 POST 請求！

EDIT2：（這不能解決問題）如果我將響應主體更改為字符串，則沒有錯誤！ 有問題

event['params]['calc']

Answer 1

您的問題出在代碼流上。 基本上你不會在回調執行之前等待 putItem 完成......試試這個......

dynamoDB.putItem(params,(err,data) => {
if(err){

  return callback(err, null)

}

const response = {
    statusCode: 200,
    headers: {
        'content-type': 'application/json',
        'Access-Control-Allow-Origin': '*' 
    },

    body: JSON.parse(event.body).calc
};

return callback(null, response); 

});

Answer 2

這里有兩個問題：

1. 您的代碼正在崩潰，因為您可能試圖在事件 object 中訪問 null 屬性
2. 因為您的代碼在您可以返回完整響應之前失敗，所以正確的 cors 標頭不會被發送回瀏覽器。

始終嘗試捕獲 lambda 代碼中的錯誤。 在發生錯誤的情況下，始終記錄錯誤並返回狀態代碼為 500 的完整響應。 此外，處理異步函數也很重要，例如帶有 promises 的putItem 。 在使用 JavaScript 之前真正掌握這個概念！