Next.js网站使用合作方筛选器时出现Failed to fetch错误求助

核心问题定位 #

你的try/catch未捕获到错误，说明触发失败的fetch并非在getStaticProps（服务端预渲染阶段）执行，而是客户端运行时发起的请求——比如筛选器切换时触发的前端请求，这部分代码未添加错误捕获逻辑。

同时，无痕模式正常、清除缓存Cookie可暂时恢复的现象，指向问题根源是浏览器本地存储（Cookie、缓存、localStorage等）或请求上下文（如Referrer、Cookie携带规则）导致的请求失败。

具体排查&修复步骤 #

1. 给客户端请求补全错误捕获 #

找到筛选器切换时触发的前端请求代码，用try/catch包裹或给fetch添加.catch()，同时通过浏览器控制台定位具体失败原因：

// 示例：筛选器切换时的客户端请求逻辑
async function handlePartnerFilterSelect(partnerName) {
  try {
    const res = await fetch(`/api/get-partner-content?name=${encodeURIComponent(partnerName)}`);
    // 主动校验HTTP状态码，避免隐藏错误
    if (!res.ok) throw new Error(`请求失败，状态码：${res.status}`);
    const data = await res.json();
    // 后续数据处理逻辑
  } catch (err) {
    console.error('筛选请求失败详情:', err);
    // 可添加前端错误提示逻辑
  }
}

打开浏览器控制台（F12）的「Network」标签，切换筛选器时查看失败请求的状态码、请求头、响应内容，确认是权限拦截、跨域问题还是请求参数异常。

2. 排查安全头与请求上下文冲突 #

针对你的next.config.js安全头配置，重点检查两项：

• Referrer-Policy：当前设置为origin-when-cross-origin，若合作方接口对Referrer有严格限制，站内跳转时携带的Referrer可能被拒绝，而新标签页打开时Referrer为空/不同，请求可正常执行。可临时修改为no-referrer-when-downgrade测试：

{
  key: 'Referrer-Policy',
  value: 'no-referrer-when-downgrade',
}

• Cookie携带规则：若合作方接口需要携带Cookie验证身份，检查请求是否配置了正确的credentials参数：

fetch(url, {
  credentials: 'include', // 同域请求可使用'same-origin'，跨域需确保对方允许携带Cookie
})

3. 处理Cookie/Session异常 #

清除Cookie后暂时恢复，说明浏览器存储的Cookie存在过期、SameSite属性限制等问题：

• 检查合作方域名的Cookie属性，若SameSite设置为Strict，站内跨域请求可能无法携带该Cookie，而新标签页打开时重新生成的Cookie无此限制；
• 可在客户端请求前，主动清除合作方域名的过期Cookie，或引导用户重新验证会话。

4. 解决请求竞态与缓存干扰 #

筛选器快速切换时可能出现请求竞态（前一个请求未完成就发起新请求），或浏览器缓存了错误响应：

• 给请求URL添加时间戳，强制跳过缓存：

const url = `/api/get-partner-content?name=${encodeURIComponent(partnerName)}&t=${Date.now()}`;

• 使用AbortController取消未完成的请求，避免竞态冲突：

let abortController = null;

async function handlePartnerFilterSelect(partnerName) {
  // 取消之前未完成的请求
  if (abortController) abortController.abort();
  
  abortController = new AbortController();
  try {
    const res = await fetch(`/api/get-partner-content?name=${encodeURIComponent(partnerName)}`, {
      signal: abortController.signal,
    });
    // 数据处理逻辑
  } catch (err) {
    // 忽略主动取消的请求错误
    if (err.name !== 'AbortError') {
      console.error('请求失败:', err);
    }
  }
}

额外验证步骤 #

• 切换筛选器时，在控制台执行document.cookie，对比新标签页的Cookie内容，检查是否存在缺失或异常字段；
• 联系合作方确认接口是否对站内请求有特殊限制，比如Referrer白名单、会话有效期规则等。

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