Vercel部署Nuxt3 API代理遇大负载数据问题：limit参数未生效

问题现象 #

• 本地开发环境API代理功能正常，但部署到Vercel后，带limit=10查询参数的代理请求未正确传递参数，导致目标API返回超出负载限制的数据，触发403错误
• 小数据量的API端点通过代理可正常工作，大数据集端点无法返回数据；直接访问目标API（不通过代理）则可正常获取数据

解决方案 #

1. 修正生产环境代理配置 #

Nuxt的nitro.devProxy仅在开发环境生效，生产环境（Vercel）需使用routeRules配置代理，确保查询参数和路径完整传递：

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    routeRules: {
      '/api/student/**': {
        proxy: 'https://abcschool.institute.org.in/api/student/**',
        headers: { 'host': 'abcschool.institute.org.in' }
      },
      '/api/abcd/**': {
        proxy: 'https://ensureias.com/api/student/**',
        headers: { 'host': 'ensureias.com' }
      }
    }
  }
})

• 使用**通配符匹配所有子路径，保证查询参数不会丢失
• 设置host请求头匹配目标API域名，避免目标服务器因Host校验拒绝请求

2. 显式传递查询参数 #

将查询参数从URL剥离，通过useFetch的params选项传递，确保参数被正确编码：

<script setup lang="ts">
const commonParams = {
  limit: 10,
  sort: 'startDate',
  orderBy: 'DESC',
  checkLastScore: true,
  totalRecords: true
}

// 代理请求apiData1
const { data: apiData1 } = await useFetch(
  '/api/student/quizgroup/quiz/5e957950330e1602150310dd',
  { server: true, params: commonParams }
)

// 代理请求apiData2
const { data: apiData2 } = await useFetch(
  '/api/abcd/student/quizgroup/quiz/61a872b4ab9ac802fe4cb555',
  { server: true, params: commonParams }
)
</script>

<template>
  <div>
    <div style="background-color: antiquewhite;">
      <div>
        apiData1: {{ apiData1 }}
        <div>
          <a :href="`/api/student/quizgroup/quiz/5e957950330e1602150310dd?${new URLSearchParams(commonParams)}`" target="_blank">
            Proxy apiData1 Url     
          </a>
        </div>
        <div>
          <a :href="`https://abcschool.institute.org.in/api/student/quizgroup/quiz/5e957950330e1602150310dd?${new URLSearchParams(commonParams)}`" target="_blank">
            Actual apiData1 Api Url
          </a>
        </div>
      </div>
    </div>
    <div style="background-color: lightblue;">
      <div>
        apiData2: {{ apiData2 }}
        <div>
          <a :href="`/api/abcd/student/quizgroup/quiz/61a872b4ab9ac802fe4cb555?${new URLSearchParams(commonParams)}`" target="_blank">
            Proxy apiData2 Url          
          </a>
        </div>
        <div>
          <a :href="`https://ensureias.com/api/student/quizgroup/quiz/61a872b4ab9ac802fe4cb555?${new URLSearchParams(commonParams)}`" target="_blank">
            Actual apiData2 Api Url          
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

这种方式避免了手动拼接URL可能导致的编码错误，确保参数完整传递到代理目标。

3. 排查Vercel Edge Functions限制 #

Vercel Edge Functions对请求/响应大小有默认限制，若目标API返回数据仍超出限制：

• 确认limit=10参数已正确传递到目标API，返回数据量符合预期
• 若数据量仍过大，可在Nuxt服务器端对响应做分页处理，或改用Server Components分批加载数据

4. 验证代理请求完整性 #

在Vercel控制台的Functions页面查看代理函数的请求日志，检查query字段是否包含所有预期参数，确认参数传递无误。

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