Next.js API部署Vercel后带端口URL请求超时问题排查

问题描述 #

本地运行Next.js项目时，api/route.js中调用带端口（9081）的后端接口正常，但部署到Vercel后出现超时。测试不带端口的公开接口（如https://pokeapi.co/api/v2/pokemon/ditto）在本地和Vercel均正常运行。

相关代码如下：

import { NextResponse } from 'next/server'
// 注：本地运行需补充 axios 导入：import axios from 'axios'

export async function POST(request) {
  const { email, password } = await request.json()

  try {
    const { data } = await axios({
      method: 'post',
      url: 'https://app.meusite.com:9081',
      data: {email, password}    
    })

    return NextResponse.json(
      { message: 'success', user: data },
      { status: 200 }
    )
  } catch (err) {
    const { response } = err
    console.log(err)
    return NextResponse.json(
      { message: err },
      { status: response.data.status }
    )
  }
}

原因与解决方案 #

核心原因 #

Vercel的出站网络限制了对非标准端口（除80/443外）的访问，免费及部分付费计划下，请求非标准端口的服务会被拦截，最终导致超时。

解决办法 #

• 切换后端服务到标准HTTPS端口（443）
  这是最直接的方案，将你的后端服务app.meusite.com配置为使用443端口（HTTPS默认端口），修改API调用URL为https://app.meusite.com即可。

• 使用中间层代理服务
  如果无法修改后端端口，可搭建一个中间代理服务（如另一个Vercel项目或其他云服务），让代理服务访问后端非标准端口，再让Next.js的API路由调用代理服务的标准端口接口。

• 优化错误处理逻辑
  当前代码在请求超时（无response返回）时会抛出Cannot read properties of undefined错误，建议修改为：

  catch (err) {
    console.log(err)
    const status = err.response?.data?.status || 500
    const message = err.response?.data?.message || '请求超时或服务不可用'
    return NextResponse.json({ message }, { status })
  }
  

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