Nuxt 3 项目中隐藏服务器 API 调用请求

从浏览器网络中隐藏服务器 API 调用请求

问题

在 Nuxt 3 项目中，当页面导航时，希望隐藏对 server/api 文件夹中服务器 API 路由的 Fetch/XHR 请求。

解决方法

步骤 1：启用 SSR 仅 API 路由

在 nuxt.config.ts 中，为服务器 API 路由启用 SSR：

export default defineNuxtConfig({
    routeRules: {
        '/api/**': {
            ssr: true
        }
    }
})

步骤 2：客户端代码中使用 useLazyFetch()

使用 useLazyFetch() 惰性加载服务器 API 路由：

hello.vue

<script setup>
import { useLazyFetch } from 'nuxt/app'

const fetchAdvantages = useLazyFetch('/api/advantages')

const { data: advantages, error } = await fetchAdvantages()
</script>

步骤 3：禁用 URL 重写

禁用 target: 'server' 的 URL 重写：

export default defineNuxtConfig({
    target: 'static',
    ...
})

步骤 4：确保服务器 API 路由的响应是 JSON

确保服务器 API 路由的响应是 JSON 格式：

server/api/advantages.ts

export default defineEventHandler(async (event) => {
    const advantages = await fetch('https://example.com/api/advantages')
    return advantages.json()
})

注意事项

• useLazyFetch() 确保只在需要时发送服务器 API 请求。
• 禁用 URL 重写防止客户端错误地重写服务器 API 路由的 URL。
• JSON 格式的响应防止浏览器将其解释为 HTML。

结论

通过遵循这些步骤，可以成功地隐藏对服务器 API 路由的请求。

常见问题解答

1. 为什么需要隐藏服务器 API 请求？
   • 提高网站安全性，防止敏感数据的泄露。
2. 如何确定服务器 API 路由是否成功隐藏？
   • 检查浏览器的网络请求列表，确保没有来自 /api 文件夹的请求。
3. useLazyFetch() 的替代方案是什么？
   • 使用 $fetch() 函数，但需要手动处理导航时的数据获取。
4. 服务器 API 路由的响应是否可以是 XML？
   • 不行，必须是 JSON 格式。
5. 是否可以使用反向代理来隐藏服务器 API 请求？
   • 可以，但需要额外的配置和维护。