Next.js调用Square API出现Fetch错误：webpack-internal协议不支持

核心问题分析 #

• 你看到的webpack-internal相关报错是Next.js开发环境下React DevOverlay的偶发干扰问题，和Square API调用逻辑无关，优先排查业务代码问题即可。
• 接口请求没有发送到Square服务器的核心原因有两点：
  1. 代码存在语法错误：你在fetch的回调中写的是res.json，只是获取了json方法本身，没有执行调用，后续逻辑直接中断，自然不会完成请求发送。
  2. 服务端请求不受客户端proxy配置影响：你之前在客户端跑的POST请求走了配置的代理，但getStaticProps/getServerSideProps运行在服务端，proxy规则不生效，如果你用的是相对路径作为请求地址，服务端会默认请求本地服务，不会发送到Square的远程接口。
• 额外逻辑偏差：你提到要使用getServerSideProps实现实时服务端拉取，但当前代码声明的是getStaticProps，两者运行时机差异很大：
  • getStaticProps仅在项目构建/增量重构时运行一次，无法实时拉取最新库存
  • 如需每次访问都拉取最新数据，要替换为getServerSideProps

完整修复方案 #

1. 修正fetch返回值处理的语法错误，补充.json()的调用括号
2. 将requests.fetchAllStock改为Square API的完整绝对路径，必须带https://connect.squareup.com前缀，不能使用相对路径
3. 确认请求头配置在服务端环境可正常读取：如果API_KEY存在环境变量中，服务端运行的函数可以直接读取process.env.SQUARE_API_KEY，不需要加NEXT_PUBLIC_前缀，避免密钥泄露给客户端
4. 补充响应状态校验，避免接口返回非200状态时报错，参考修复后的代码：

export async function getServerSideProps() {
  let allStockObjects = null
  try {
    const res = await fetch(requests.fetchAllStock, {
      method: "GET",
      headers: headers,
    })
    if (!res.ok) throw new Error(`请求失败，状态码：${res.status}`)
    allStockObjects = await res.json()
  } catch (err) {
    console.error('拉取库存数据失败：', err)
  }

  return {
    props: {
      allStockObjects,
    },
  };
}

5. 如果你确实需要使用静态生成能力，可以保留getStaticProps，同时添加revalidate参数配置增量更新周期，比如revalidate: 60代表每60秒重新拉取一次库存数据。

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