Nuxt 3中能否为useFetch传递自定义参数？

核心结论 #

可以为useFetch传递自定义参数，但不要通过params/query（二者是URL查询参数的别名）传递业务级自定义参数，否则会引发参数序列化格式问题。推荐通过POST请求体、自定义请求头或封装Composable的方式实现，同时解决服务端授权头的需求。

一、先解决当前筛选参数格式异常问题 #

你遇到的双引号格式问题，本质是嵌套对象被序列化为JSON字符串：当你在query中传递{ filters: queryFilters }时，Nuxt会把嵌套的queryFilters对象转成JSON字符串，导致后端拿到的是带双引号的序列化值；而你搭档的代码是直接把queryFilters展开为query的顶级键值对，所以后端拿到的是原生键值结构。

方案1：把自定义参数（外部API路径）放到POST请求体中

这是最直接的方式，适合POST请求场景：

// 前端调用
const { data: auctionData, error: auctionError } = await useFetch(
  `/api/core/generic`,
  {
    method: 'POST',
    body: {
      ...auctionBody,
      path: `lots/auctions`, // 自定义外部API路径
      filters: queryFilters  // 筛选参数直接放body
    },
  }
)

// 后端server/api/core/generic.post.ts
export default defineEventHandler(async (event) => {
  // 直接读取body中的所有参数，格式完全匹配原始对象
  const { path, filters, ...restBody } = await readBody(event);
  
  // 后续逻辑：用path调用外部API，携带filters和restBody
})

方案2：若必须用URL查询参数，展开筛选参数为顶级键

如果需要把自定义路径放在URL中，将筛选参数直接展开到query中：

// 前端调用
const { data: auctionData, error: auctionError } = await useFetch(
  `/api/core/generic`,
  {
    method: 'POST',
    body: auctionBody,
    query: {
      path: `lots/auctions`, // 自定义路径参数
      ...queryFilters        // 展开筛选参数为顶级键
    },
  }
)

// 后端处理
export default defineEventHandler(async (event) => {
  const query = getQuery(event);
  const path = query.path as string;
  
  // 移除路径参数，剩下的就是原生筛选键值对
  delete query.path;
  
  // 此时query格式和你搭档的方案完全一致：{ param1: 'true', param2: '10' }
})

二、传递自定义参数的通用方案 #

1. 用自定义请求头传递非业务参数

如果自定义参数不需要暴露在URL或请求体中（比如后端内部标记），可以用自定义请求头：

// 前端
const { data: auctionData, error: auctionError } = await useFetch(
  `/api/core/generic`,
  {
    method: 'POST',
    body: auctionBody,
    headers: {
      'X-External-Path': `lots/auctions`, // 自定义请求头
      'X-Request-Tag': 'generic-api-call'
    },
    query: queryFilters
  }
)

// 后端
export default defineEventHandler(async (event) => {
  const path = getRequestHeader(event, 'X-External-Path');
  const tag = getRequestHeader(event, 'X-Request-Tag');
  const query = getQuery(event);
  
  // 后续处理逻辑
})

2. 封装Composable解决服务端授权头需求

如果需要在服务端获取event添加授权头，同时统一处理通用请求，可以封装自定义Composable：

// composables/useGenericFetch.ts
export const useGenericFetch = async (externalPath: string, options: UseFetchOptions<any> = {}) => {
  // 服务端环境下获取请求事件
  const event = process.server ? useRequestEvent() : null;
  
  const customHeaders = { ...options.headers };

  // 服务端添加授权头（从请求上下文获取）
  if (event) {
    const authToken = getRequestHeader(event, 'Authorization');
    if (authToken) {
      customHeaders['Authorization'] = authToken;
    }
    // 可添加其他服务端专属头信息
  }

  return useFetch(`/api/core/generic`, {
    method: options.method || 'POST',
    body: {
      ...options.body,
      path: externalPath // 传递自定义外部API路径
    },
    headers: customHeaders,
    query: options.query,
    ...options
  });
};

组件中使用：

const { data: auctionData, error: auctionError } = await useGenericFetch(
  `lots/auctions`,
  {
    body: auctionBody,
    query: queryFilters
  }
);

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