Nuxt3 useFetch发送带Body的GET请求失败，求原因及解决方案

问题原因 #

1. HTTP规范与工具兼容性问题：HTTP规范本身不推荐GET请求携带请求体，虽然部分服务器实现支持，但浏览器、Fetch API（useFetch底层依赖）对GET请求的body处理存在兼容性问题，多数场景下会直接忽略GET请求的body内容，导致你的过滤参数无法被后端接收。
2. Nuxt3 useFetch的默认处理逻辑：useFetch遵循常规HTTP请求约定，在处理GET请求时会默认忽略配置中的body参数，优先推荐用URL查询参数传递数据。

注：Postman能成功是因为它作为测试工具没有严格遵循HTTP规范限制，允许发送带body的GET请求，但浏览器和标准Fetch API不会执行这类操作。

解决方案 #

方案一：改用URL查询参数传递过滤条件（推荐，符合HTTP规范） #

将过滤条件转为查询参数，后端解析后即可实现相同的过滤效果：

<script setup>
const token = "bearerToken000";
const options = {
    method: 'GET',
    headers: {
        Authorization: `Bearer ${token}`
    },
    params: {
        // 将数组转为逗号分隔的字符串，后端可解析回数组
        projection: ["title", "description"].join(",")
    }
}

const { data: menus } = await useFetch('http://localhost:3001/api/stores/62989e35f5a66308effb63b5/vendables/menus', options)
</script>

方案二：强制发送带Body的GET请求（仅当后端硬性要求时使用） #

如果后端必须接收GET请求的body，需要手动序列化body并绕过useFetch的默认限制，可直接使用$fetch（Nuxt内置的灵活请求工具）：

<script setup>
const token = "bearerToken000";
const requestBody = JSON.stringify({
    "projection": ["title","description"]
})

const menus = await $fetch('http://localhost:3001/api/stores/62989e35f5a66308effb63b5/vendables/menus', {
    method: 'GET',
    headers: {
        Authorization: `Bearer ${token}`,
        'Content-Type': 'application/json'
    },
    body: requestBody
})
</script>

也可以通过useFetch的fetchOptions强制传递body：

<script setup>
const token = "bearerToken000";
const requestBody = JSON.stringify({
    "projection": ["title","description"]
})
const options = {
    method: 'GET',
    headers: {
        Authorization: `Bearer ${token}`,
        'Content-Type': 'application/json'
    },
    fetchOptions: {
        body: requestBody
    }
}

const { data: menus } = await useFetch('http://localhost:3001/api/stores/62989e35f5a66308effb63b5/vendables/menus', options)
</script>

内容的提问来源于stack exchange，提问作者Hugo Cox