啟用 CORS 訪問 AWS API 網關？

Question

我正在嘗試使用 jQuery 訪問 AWS API 網關，例如：

$.ajax({
    method: 'GET',
    url: _config.api.invokeUrl + '/mymodel/' + id + '/attr',
    headers: {
        Authorization: authToken
    },
    data: {},
    contentType: 'application/json',
    success: function(result){
        console.log('success:'+result);
    },
    error: function ajaxError(jqXHR, textStatus, errorThrown) {
        console.error('Error: ', textStatus, ', Details: ', errorThrown);
        console.error('Response: ', jqXHR.responseText);
    }
});

但是，jQuery/瀏覽器報告 CORS 錯誤：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://sd98fsf98.execute-api.us-east-1.amazonaws.com/test/mymodel/123/attr. (Reason: CORS request did not succeed).

顯然，我無法通過從sd98fsf98.execute-api.us-east-1.amazonaws.com托管我的代碼來修復它。 我在網關 API 設置中找不到任何選項來禁用此檢查。 如何繞過 CORS 限制？

Answer 1

您需要在 API 網關中啟用 CORS。 這為我們設置了一個選項方法，該方法添加了跨域訪問所需的標頭。

在您的 API 網關控制台中：操作 -> 啟用 Cors[為所有人選擇“*”] -> 部署 API

部署API后，請求會先從options方法中獲取headers，然后重定向到GET方法，就成功了。

請在 AWS DOCS 中找到有關啟用 CORS 的更多信息： https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.ZFC35FDC70D5FC69D269883A82E

希望這可以幫助！

Answer 2

除了 Ashwani Jha 的回答和 peeebeee 評論，請參閱這篇文章： https://enable-cors.org/server_awsapigateway.html

Amazon API 網關通過 API 網關控制台中的一個簡單按鈕添加了對 CORS 啟用的支持。 Unfortunately that button has a partial behavior, thus setting CORS correctly only for 200 answer (so not other HTTP status codes) and ignoring JQuery header support. 目前考慮的最佳解決方案是避免使用 CORS 按鈕並手動設置配置。 這可以通過幾個步驟來實現：

1. 登錄 API 網關控制台
2. 在設置CORS之前創建所有需要暴露的REST資源（如果啟用CORS后創建了新的資源/方法，必須重復這些步驟）
3. Select 資源
4. 添加 OPTIONS 方法，選擇集成類型“mock”
5. 對於資源的每個方法
6. Go 對響應方法
7. 添加所有應該支持的響應方式（即200、500等）

8. 對於每個響應代碼，將響應標頭設置為

   • X-Requested-With
   • 訪問控制允許標頭
   • 訪問控制允許來源
   • 訪問控制允許方法

9. Go 到集成響應，select 創建的響應代碼之一，然后是 Header 映射

10. 插入標題示例的默認值：
    • X-Requested-With: '*'
    • Access-Control-Allow-Headers: 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,x-requested-with'
    • 訪問控制允許來源：'*'
    • 訪問控制允許方法：'POST，GET，OPTIONS'

必須為每個方法重復此操作，包括新創建的 OPTIONS

11. 將 API 部署到階段
12. 使用http: //client.cors-api.appspot.com/client 檢查 CORS 請求是否已成功啟用