Chrome开发者工具Network面板不显示Next.js项目发往服务端的请求怎么办

你遇到的情况90%以上的概率是请求在Next.js的服务端运行环境中发起，而非浏览器客户端发起，所以不会出现在Chrome的Network面板中，可按以下场景对应排查：

1. 先确认请求的运行环境 #

Next.js代码会区分服务端运行和客户端运行两个环境：

• 写在无'use client'标注的组件、getServerSideProps/getStaticProps等数据获取方法、App Router下的路由处理程序（route.ts/route.js）中的axios请求，都是在Node.js服务端进程中发起的，这类请求不会经过浏览器网络层，自然不会出现在浏览器开发者工具的Network面板里。
  查看这类请求的方法很简单：直接在发起请求的代码位置增加日志打印即可，开发模式下日志会输出到启动Next.js服务的终端中：

  // 发送请求前打印请求参数
  console.log('POST请求携带数据：', JSON.stringify(postData, null, 2))
  const res = await axios.post('你的接口地址', postData)
  // 也可以打印响应结果做对照
  console.log('接口响应结果：', res.data)
  

• 写在标注了'use client'的客户端组件、useEffect回调、用户交互事件（比如点击、提交事件）中的axios请求，属于浏览器客户端发起的请求，正常应该出现在Network面板中，如果找不到可以按下面的步骤排查。

2. 客户端请求看不到的排查步骤 #

• 先重置Network面板的过滤规则：打开Network面板，选择「Fetch/XHR」分类过滤，再点击过滤输入框旁边的清除按钮，清空所有自定义过滤条件，避免请求被误过滤。
• 关闭所有浏览器扩展，使用无痕模式打开页面重新发起请求，排除广告拦截、请求修改类扩展拦截/隐藏请求的可能。
• 临时添加axios全局拦截器打印所有客户端请求信息，不管Network能不能抓到，都会在浏览器控制台输出请求详情：

  // 添加到客户端代码的入口位置，比如layout.tsx或者页面组件的顶部
  import axios from 'axios'
  
  axios.interceptors.request.use(config => {
    console.log(`[${config.method?.toUpperCase()}] ${config.url}`, '请求参数：', config.data)
    return config
  })
  

3. 补充：POST请求能看到但看不到携带数据的解决方法 #

如果Network面板能找到对应的POST请求，但看不到发送的数据，点进请求详情页，切换到「Payload」标签页查看即可，不要只看「Headers」标签里的内容。如果是发送FormData格式的数据，还需要展开Payload标签下的「Form Data」分区查看具体字段。

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