Cloudfront 分配后面的 API 網關和 Static S3 存儲桶是否可以使用相同的域？

Question

我目前正在 AWS 中創建一個反饋應用程序。 我的后端在 Lambda 中，它連接到 API 網關，它的前端由 Cloudfront 分布后面的 Static S3 存儲桶提供服務。

我想在 API 網關上啟用 TLS 1.2，但是，這似乎只能通過 Cloudfront 實現。 我還希望能夠在與 S3 存儲桶相同的域名但不同的路徑上提供它。 目前，S3 存儲桶位於 feedback.domain.com。 我確實有一個自定義域名連接到 api.feedback.domain.com 上的 API 網關，當我通過 Postman 向它發出請求時，它會起作用。但是，當我通過 S3 存儲桶頁面上的 JavaScript 發出請求時, 它會從不工作，我會收到 CORS 錯誤。 如果更可行，我很樂意使用它，但我需要問另一個關於 CORS 的問題。

我想讓 API 網關位於 feedback.domain.com/api 上，因為據我所知，使用與發出請求的頁面相同的域應該克服 CORS。我嘗試了以下設置但無法獲得這個工作。

當我瀏覽到 feedback.domain.com/api 時，我看到了我在 Cloudfront 中設置的錯誤頁面。 我已經嘗試創建一個失效，所以它已經清除了 Cloudfront 分發上的緩存，但這並沒有改變任何東西。

我修改了設置，因此 S3 存儲桶的原始路徑是 /web/* 但是我繼續在任何地方設置 AccessDenied 錯誤：

提前感謝任何可以提供智慧的人:)

更新：

以下是我在 API 階段的 Cloudwatch 日志。 我 go 到 feedback.domain.com/api，我在 Cloudfront 中定義的自定義錯誤頁面出現 403 錯誤，但沒有登錄 Cloudwatch：

以下是行為：

API 行為：

當前原點設置：

給@Caldazar 的注釋，你提到 403 意味着我正在點擊 API，但是，如果我將 go 轉換為無效的 url，feedback.domain.com/IDoNotExist 我仍然會收到 403 錯誤。 我相信這與 S3 有關？

Answer 1

問題出在您的Origin path中。

Origin path值實際上是將請求發送到源時附加到您的請求的內容。 例如，對https://example.com/api/test請求將導致請求被發送到https://example.com/api/*/api/test

對於 API 網關，您的Origin path應該是您的 API 階段，例如/dev ， /prod ...

您應該創建其他behavior ，將路徑模式/api/*和Origin設置為您在上面創建的API origin 。

由於您的路徑中有/api/ ，因此這不會與您在API Gateway中的路徑正確匹配。 為了解決這個問題，您應該將CloudFront Function添加到上面作為Viewer request一部分創建的API behavior中。 CloudFront Functions位於Edit behavior頁面的底部。 這個 function 應該將/api更改為/ 。 這是適用於這種情況的代碼：

function handler(event) {
    var request = event.request;
    var uri = request.uri;

    // Check whether the URI starts with "api"
    if (uri.startsWith('/api/')) {
        request.uri = uri.replace('/api/', '/');
    }

    return request;
}