☰

Cloudfront 与 S3、Wordpress 后端和 Vue 前端的行为

tag-icon • tag-icon wordpress amazon-s3 amazon-cloudfront
Cloudfront 与 S3、Wordpress 后端和 Vue 前端的行为

我会尽力解释我的情况和问题。

之前我在 cloudfront 后面有一个 wordpress 网站。设置行为后一切运行正常。

最近我已开始使用我的 wordpress 实例作为 api 主机。我在 s3 上构建了一个 Vue 作为我的前端内容。所有这些都在 cloudfront 后面。

所以现在，我的默认行为必须指向 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 网站。稍后我会详细说明并标记我的解决方案。

目前，这意味着在通过查看前端为域安装服务器工作器后，它将中断管理面板的访问。我猜想，它在请求到达云端之前就劫持了请求。

答案1

为了防止服务工作者劫持请求，使用自定义路由来获取匹配的 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)

相关内容