如何使用MirageJS拦截Next.js API路由服务端发起的外部接口请求

MirageJS 默认仅拦截浏览器环境下的 fetch/XMLHttpRequest 请求，你在 Next.js API 路由中发起的 axios 请求运行在 Node.js 服务端环境，走的是 Node 原生 http 模块，默认不在 Mirage 的拦截范围内，因此会返回404。

方案1：给服务端 axios 绑定 Mirage 适配器，实现请求拦截 #

这个方案可以复用你已有的 Mirage 路由配置，不需要修改现有业务逻辑。

1. 首先调整 Mirage 初始化逻辑，做单例判断避免重复注册：

// mirage/config.ts
import { createServer, Server } from 'miragejs'

let mirageServer: Server | null = null

export function initMirage() {
  if (mirageServer) return mirageServer
  mirageServer = createServer({
    routes() {
      // 建议统一设置前缀，避免每次写完整路径
      this.urlPrefix = process.env.NEXT_PUBLIC_LCM_FIRSTRUNNER_URL as string
      this.get('/service/exist/mail/:email', (schema, request) => {
        // 你的模拟返回逻辑
        return { exists: true }
      })
    },
    environment: process.env.NODE_ENV,
  })
  return mirageServer
}

2. 在 Next.js API 路由开头注入 Mirage 适配器（仅开发环境执行）：

import type { NextApiRequest, NextApiResponse } from 'next'
import axios from 'axios'

// 开发环境下初始化Mirage，绑定axios适配器
if (process.env.NODE_ENV === 'development') {
  const { initMirage } = require('@/mirage/config')
  const server = initMirage()
  axios.defaults.adapter = server.pretender.adapter
}

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  // 保留你原有的业务逻辑不变
  const mail = req.query.email;
  try {
    const response = await axios.get(process.env.NEXT_PUBLIC_LCM_FIRSTRUNNER_URL + '/service/exist/mail/' + mail)
    res.status(response.status).send(response.data);
  } catch (error) {
    console.log(error)
    res.status(500).send(error)
  }
  return res.end(); 
}

export default handler

方案2：开发环境直接返回模拟数据 #

如果不需要严格复用 Mirage 逻辑，这个方案更简单，无额外适配成本：

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  const mail = req.query.email;

  // 开发环境直接返回模拟结果，跳过外部请求
  if (process.env.NODE_ENV === 'development') {
    return res.status(200).send({
      exists: true,
      // 自定义模拟字段
    })
  }

  // 生产环境走原有外部请求逻辑
  try {
    const response = await axios.get(process.env.NEXT_PUBLIC_LCM_FIRSTRUNNER_URL + '/service/exist/mail/' + mail)
    res.status(response.status).send(response.data);
  } catch (error) {
    console.log(error)
    res.status(500).send(error)
  }
  return res.end(); 
}

如果仍出现404，请确认你的 Mirage 路由是完整匹配请求的全路径，或者已经通过this.urlPrefix配置了公共前缀，不要只写路径后缀。

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