Next.js 13设置cache:'no-store'等缓存配置触发请求报错问题

问题分析 #

你遇到的矛盾点：默认fetch请求会缓存旧数据，导致Strapi更新内容后前端无法同步；但添加cache:'no-store'、cache:'no-cache'或revalidate:0这类禁用缓存的配置时，直接触发请求失败错误。核心原因大概率是Strapi的CORS配置不兼容无缓存请求的头信息，或者Next.js的缓存配置用法有误。

解决步骤 #

1. 检查并修正Strapi的CORS设置 #

无缓存的fetch请求会携带额外的请求头（比如Cache-Control: no-store），如果Strapi的CORS未允许这些头，会直接拦截请求：

• 登录Strapi后台，进入Settings > Global Settings > CORS
• 确保Allowed Origins包含你的Next.js项目域名（例如http://localhost:3000）
• 在Allowed Headers中添加Cache-Control、Authorization、Content-Type
• 确认Allowed Methods已勾选GET
• 保存设置后重启Strapi服务

2. 正确配置Next.js的fetch缓存 #

方法一：在fetch中直接配置缓存选项

确保缓存参数格式正确，同时添加错误日志排查具体问题：

async function getData() {
  const res = await fetch('http://127.0.0.1:1337/api/posts', {
    method: 'GET',
    headers: {
      "Content-Type": "application/json",
      Authorization:
        'Bearer 40742660cb44bedd348f8e69024c8f591f80124111fcfa2f1ec612f63e22be4d55ed429b4497887812da5e385f02a2b27e352551284c2c9793c33efd620c86f34058504b0ed9c76a13a6c7313d3b39826748ad0a15f5dab8ba85dbefba2ef29ab52290f98ca73a4359c6988063e96f0f5f68dafd25aac04f865e91dd9515915a',
    },
    cache: 'no-store', // 禁用缓存，每次请求都拉取最新数据
  })

  // 打印错误详情方便排查
  if (!res.ok) {
    console.error('请求失败：', res.status, res.statusText)
    throw new Error(`请求失败：${res.statusText}`)
  }
  return res.json()
}

export default async function page() {
  const result = await getData()
  console.log(result)
  return <div>page</div>
}

方法二：通过页面级revalidate禁用缓存

在App Router中，可以直接给页面组件添加revalidate配置，无需修改fetch参数：

// 页面级禁用缓存，每次访问都重新获取数据
export const revalidate = 0

async function getData() {
  const res = await fetch('http://127.0.0.1:1337/api/posts', {
    method: 'GET',
    headers: {
      "Content-Type": "application/json",
      Authorization:
        'Bearer 40742660cb44bedd348f8e69024c8f591f80124111fcfa2f1ec612f63e22be4d55ed429b4497887812da5e385f02a2b27e352551284c2c9793c33efd620c86f34058504b0ed9c76a13a6c7313d3b39826748ad0a15f5dab8ba85dbefba2ef29ab52290f98ca73a4359c6988063e96f0f5f68dafd25aac04f865e91dd9515915a',
    },
  })

  if (!res.ok) {
    console.error('请求失败：', res.status, res.statusText)
    throw new Error(`请求失败：${res.statusText}`)
  }
  return res.json()
}

export default async function page() {
  const result = await getData()
  console.log(result)
  return <div>page</div>
}

3. 排查请求失败的具体原因 #

如果以上配置后仍报错，打开浏览器控制台的Network标签：

• 查看请求的状态码：401代表令牌无效/过期，403代表权限不足，403 CORS代表跨域配置问题
• 查看Strapi后台的日志（./logs目录下），确认服务器端的具体错误信息
• 验证API令牌权限：进入Strapi的Settings > API Tokens，确保该令牌拥有posts内容类型的读取权限

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