如何對來自 API Gateway API 的 CORS 錯誤進行疑難排解?

2 分的閱讀內容
0

在我嘗試調用 Amazon API Gateway API 時,收到錯誤 "No 'Access-Control-Allow-Origin' header is present on the requested resource"。我想要對此錯誤和來自 API Gateway 的其他 CORS 錯誤進行疑難排解。

簡短描述

在伺服器未傳回 CORS 標準所需的 HTTP 標頭時,會發生跨來源資源共用 (CORS) 錯誤。若要解決來自 API Gateway REST APIHTTP API 的 CORS 錯誤,您必須重新設定 API 以符合 CORS 標準。

如需有關為 REST API 設定 CORS 的詳細資訊,請參閱為 REST API 資源開啟 CORS。若為 HTTP API,請參閱為 HTTP API 設定 CORS

**注意:**CORS 必須在資源層級設定,並且可以使用 API Gateway 組態或後端整合來進行處理,例如 AWS Lambda

解決方法

下列範例程序說明如何對 No ‘Access-Control-Allow-Origin’ header present CORS 錯誤進行疑難排解。但是,您可以使用類似的程序來對所有 CORS 錯誤進行疑難排解。例如: Access-Control-Allow-Methods 標頭不支援該方法錯誤和 ‘Access-Control-Allow-Headers’ 標頭不存在錯誤。

**注意:**由於下列任何一種原因,可能會發生 'Access-Control-Allow-Origin' 標頭不存在錯誤:

  • API 未設定可傳回所需 CORS 標頭的 OPTIONS 方法。
  • 未設定另一種方法類型 (例如 GETPUT、或 POST) 來傳回所需的 CORS 標頭。
  • 未設定具有 Proxy 整合非 Proxy 整合 的 API 來傳回所需的 CORS 標頭。
  • (僅適用於 私有 REST API) 呼叫了錯誤的調用 URL,或流量未路由至介面虛擬私有雲端 (VPC) 端點。

確認錯誤的原因

可採用以下兩種方法透過 API Gateway 確認 CORS 錯誤的原因:

  • 在調用 API 時,建立 HTTP 封存 (HAR) 檔案。然後,透過檢查 API 回應中傳回的參數標頭,來確認檔案中的錯誤原因。
    -或-
  • 使用瀏覽器中的開發人員工具,來檢查失敗 API 請求中的請求和回應參數。

在遇到錯誤的 API 資源上設定 CORS

若為 REST API

請遵循使用 API Gateway 主控台在資源上開啟 CORS 中的指示。

若為 HTTP API

請遵循為 HTTP API 設定 CORS 中的指示。

**重要:**如果您為 HTTP API 設定 CORS,則 API Gateway 會自動傳送對預檢 OPTIONS 請求的回應。即使沒有為您的 API 設定 OPTIONS 路由,也會傳送此回應。對於 CORS 請求,API Gateway 會將已設定的 CORS 標頭新增至整合的回應中。

在 API 資源上設定 CORS 時,請確保執行下列操作:

  • 針對 **API 的閘道回應 <api-name> **,選擇 DEFAULT 4XXDEFAULT 5XX 核取方塊。

**注意:**在您選取這些預設選項時,即使請求未到達端點,API Gateway 也會以所需的 CORS 標頭回應。例如,如果請求包含不正確的資源路徑,API Gateway 仍然會回應 403「遺失身分驗證字符」錯誤

  • 針對方法,選擇 OPTIONS 方法的核取方塊 (如果尚未選取)。此外,請選擇 CORS 請求可用的所有其他方法的核取方塊。例如: GETPUT、以及 POST

**注意:**如果還沒有任何方法,在 API Gateway 主控台中設定 CORS 會將 OPTIONS 方法新增至資源。此外還會使用所需的 Access-Control-Allow-* 標頭,來設定 OPTIONS 方法的 200 回應。如果您已使用主控台設定 CORS,再次設定則會覆寫任何現有值。

設定您的 REST API 整合,以傳回所需的 CORS 標頭

設定您的後端 AWS Lambda 函數HTTP 伺服器,以在其回應中傳送所需的 CORS 標頭。請記住以下幾點:

  • 允許的網域必須併入 Access-Control-Allow-Origin 標頭值中作為清單。
  • 對於代理整合,您無法在 API Gateway 中設定整合回應,來修改 API 後端傳回的回應參數。在代理整合中,API Gateway 會將後端回應直接轉送至用戶端。
  • 如果您使用非代理整合,則必須在 API Gateway 中手動設定整合回應,以傳回所需的 CORS 標頭。

**注意:**針對具有非代理整合的 API,使用 API Gateway 主控台在資源上設定 CORS,會自動將所需的 CORS 標頭新增至資源中。

(僅適用於私有 REST API) 檢查介面端點的私有 DNS 設定

針對私有 REST API,確定是否在關聯的介面 VPC 端點上啟用私有 DNS

如果已啟用私有 DNS

請確定您使用私有 DNS 名稱從 Amazon Virtual Private Cloud (Amazon VPC) 內調用私有 API

如果未啟用私有 DNS

您必須手動將流量從調用 URL 路由至 VPC 端點的 IP 地址。

**注意:**無論是否已啟用私有 DNS,您必須使用下列調用 URL:

https://api-id.execute-api.region.amazonaws.com/stage-name

請確定您將 api-idregionstage-name 的值取代為 API 所需的值。如需詳細資訊,請參閱如何調用私有 API

**重要:**如果未啟用私有 DNS 時設定 CORS,請記住下列限制:

  • 您無法使用端點特定的公有 DNS 名稱從 Amazon VPC 內存取私有 API。
  • 您無法使用 Host 標頭選項,因為瀏覽器的請求不允許 Host 標頭操作。
  • 您無法使用 x-apigw-api-id 自訂標頭,因為它會啟動未包含標頭的預檢 OPTIONS 請求。使用 x-apigw-api-id 標頭的 API 呼叫不會連線您的 API。

相關資訊

測試 CORS

使用 API Gateway 匯入 API 在資源上開啟 CORS