Nuxt 3：如何从浏览器网络 Fetch/XHR 请求列表中隐藏服务器 api 调用请求？

Question

我有 Nuxt 3 项目，有两个页面和一个服务器 api:

配置文件：

nuxt.config.ts

export default defineNuxtConfig({
    routeRules: {
        '/api/**': {
            cache: { maxAge: 60 },
            swr: true
        }
    }
})

第 1 页：

hello.vue

<template>
    <div>
        <h2>Page Hello</h2>
        <NuxtLink to="/world">Go to World!</NuxtLink>
        <div>
            <pre>
                {{ advantages }}
            </pre>
        </div>
    </div>
</template>
<script setup>
    const { data: advantages, error } = await useFetch('/api/advantages', {
        server: true
    })
</script>

第 2 页：

world.vue

<template>
    <div>
        <h2>Page World</h2>
        <NuxtLink to="/hello">Go to World!</NuxtLink>
        <div>
            <pre>
                {{ advantages }}
            </pre>
        </div>
    </div>
</template>
<script setup>
    const { data: advantages, error } = await useFetch('/api/advantages', {
        server: true
    })
</script>

服务器API：

server/api/advantages.ts

export default defineEventHandler(async event => {
    try {
        const res = await fetch('https://example.com/api/advantages')
        const data = await res.json()
        return data
    } catch (error: any) {
        throw createError({
            statusCode: 500,
            message: `Error fetching advantages: ${error.message}`
        })
    }
})

当网站首次加载时，所有请求都是在服务器端发出的。如您所见，我在框架配置文件中配置了 API 请求的缓存。当缓存生效时，框架实际上不会向外部 API 服务发送重复的请求。

问题

从浏览器加载站点后，从一个页面移动到另一个页面（例如从

server/api

到

/hello

）时，我需要隐藏发送到项目

/world

文件夹的请求 获取/XHR 请求列表以确保站点安全

Answer 1

这是 nuxt（和其他框架）在通用渲染模式下工作的方式：

第一个页面访问在服务器端呈现，一旦加载客户端，所有后续导航仅在客户端完成。因此，为了渲染下一个页面，nuxt 会在浏览器中调用所有 api。 更多详情这里。

但是，有一个功能可能可以满足您的需求，因为它尝试生成纯静态 html/css :

export default defineNuxtConfig({
  features: {
    noScripts: true
  }
})

更多信息在这里：docs