使用 S3、Wordpress 後端和 Vue 前端的 Cloudfront 行為

我會盡力解釋我的情況和問題。

以前我在 cloudfront 後面有一個 wordpress 網站。設置行為，一切都很好。

最近我開始使用我的 wordpress 實例作為 api 主機。我在 s3 上為我的前端內容建構了一個 Vue。所有這一切都在雲端背後。

所以現在，我的預設行為必須指向 s3 而不是 wordpress 實例。我現在在瀏覽頁面時遇到問題，我不知道為什麼。

例如，在 wordpress 控制面板中，如果我點擊連結，則會點擊預設行為而不是 wp-admin/ *。如果我在預設行為仍然被擊中後刷新。但是，如果我硬刷新 (ctrl-shift-r) 所需的 wp-admin/*行為就會被命中。

這也發生在 wp-json/*

我很困惑為什麼會發生這種情況，所以任何輸入都會有所幫助。

---

添加一個例子。我導航到：/wp-admin/edit.php?post_type=page Cloudfront 路由到 * 的預設行為，即 s3。我點擊 ctrl-shift-r 並且 /wp-admin/edit.php?post_type=page 載入到我的 /wp-admin/* 行為中。

我不明白為什麼或如何解決它。

---

我正在建立一個 PWA Vue 站點。稍後我將詳細說明並標記我的解決方案。

目前，這意味著在通過查看前端為域安裝伺服器工作者之後，它將中斷管理面板的訪問。我假設它甚至在到達雲端之前就劫持了請求。

為了防止 service worker 劫持請求，使用自定義路由來獲取匹配的 url。

我正在使用工作箱，這是我想出的服務人員。

import { precacheAndRoute } from 'workbox-precaching'
import { registerRoute } from 'workbox-routing'

precacheAndRoute(self.__WB_MANIFEST)

// Match admin routes
const matchCb = ({ url, request, event }) => {
   return (
       url.pathname === '/wp-admin/' ||
       url.pathname === '/wp-admin' ||
       url.pathname === '/preview=true/'
   )
}

const handlerCb = async ({ url, request, event, params }) => {
   event.respondWith(async function () {
       // Attempt to respond with cache
       const cachedResponse = await caches.match(event.request)

       if (cachedResponse) {
           return cachedResponse
       }

       // Use the network.
       return fetch(event.request)
   }())
}

// Add a route
registerRoute(matchCb, handlerCb)

引用自：https://serverfault.com/questions/1025366