Поведение Cloudfront с S3, серверной частью Wordpress и интерфейсом Vue

Я постараюсь как можно лучше объяснить свою ситуацию и проблему.

Раньше у меня был сайт на wordpress за Cloudfront. Настройте поведение, и все это сработало.

Недавно я перешел на использование своего экземпляра wordpress в качестве хоста api. У меня есть сборка Vue на s3 для моего внешнего контента. Все это за облаком.

Итак, теперь мое поведение по умолчанию должно указывать на 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. Я подробно расскажу и обозначу свое решение позже.

На данный момент это означает, что после того, как рабочий сервер будет установлен для домена, просмотрев интерфейс, он прервет доступ к панели администратора. Я полагаю, он перехватывает запрос еще до того, как он попадет в облако.

Чтобы сервис-воркер не перехватил запрос, используется настраиваемый маршрут для получения соответствующего URL-адреса.

Я использую workbox, и это был сервисный работник, которого я придумал.

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)