如何使用 AWS API 網關啟用 CORS

Question

如何啟用 CORS 以便您可以從 jQuery 訪問自定義 AWS API 網關？

I've exposed a simple Python Lambda function through an API Gateway to lookup user data, and I'm trying to access its endpoint with jQuery like:

$.ajax({
    method: 'GET',
    url: 'https://slkdfjsl.execute-api.us-east-1.amazonaws.com/myapi/username?_='+new Date().getTime(),
    headers: {
        Authorization: authToken
    },
    data: {},
    contentType: 'application/json',
    success: function(result){
        //do stuff
    }
});

有時，這非常有效。 有時，我得到錯誤：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://slkdfjsl.execute-api.us-east-1.amazonaws.com/myapi/username?_=1606336278598  (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

什么會導致這個？

我不明白的是這種不確定性。 類似問題的答案已說明您可能需要添加：

async: true,
dataType: 'jsonp',
crossDomain: true,

到 ajax() 調用以啟用跨域訪問，但這並不能解釋為什么沒有這個的代碼大部分時間都可以工作。

我嘗試添加這些選項，這在 100% 的時間里完全破壞了它，每次都給我一個“401 未經授權的”錯誤。

有沒有辦法在我的代碼中解決這個問題，或者這可能是 AWS API 網關實現的錯誤？

Answer 1

應在后端允許跨域 (CORS) 而不是在 ajax 調用中。

嘗試跟隨。

A. AWS 網關或 API 響應的 CORS 設置

您需要啟用 CORS 或者

1. 來自 API 網關控制台的 AWS API 網關 CORS 設置。 （ https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors-console.htm ）

2. 您需要在對 API 的響應中返回 CORS 標頭

如果兩者一起完成，則第 1 點優先。

需要設置的標頭是'''

Access-Control-Allow-Origin=*
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE (you may even add all headers here during debugging)

Access-Control-Max-Age=0

Access-Control-Expose-Headers, Access-Control-Allow-Headers may be left as default.

'''

如果您認為您的設置正確，請確保注意以下幾點。

B. NULL ORIGIN您的本地應用程序（API 客戶端）必須托管在 Web 服務器上。 如果你直接從文件系統運行它，你有一個 null 來源。 在 AWS CORS 設置中，絕不允許使用 null 源。

C。 API URL 必須存在所以請確保您的 API URL 是正確的。 在這種情況下，您可能不會收到 API 確實存在錯誤（如果錯誤在子路徑中）。 檢查最后是否需要斜杠 / 。