使用Strapi Rest API与Next.js时出现服务器错误：Fetch失败

1. 检查CORS配置 #

Strapi默认CORS设置可能未允许Next.js域名。进入Strapi后台Settings > Global Settings > Security > CORS，确认：

• Origin 包含你的Next.js开发地址（如http://localhost:3000），或临时设为*测试（生产环境禁用）
• Methods 勾选GET、POST等你用到的请求方法
• Headers 包含Content-Type、Authorization等必要头信息
  修改后重启Strapi服务。

2. 验证API权限 #

Strapi 4.x内容类型默认禁止公开访问。进入Content-Type Builder，找到目标内容类型切换到Permissions标签，给public角色开启对应API的权限（如find、findOne），保存后刷新后台右上角的权限缓存。

3. 规范Next.js请求逻辑 #

Next.js 13的App Router与Pages Router请求逻辑有差异：

• App Router中，async组件内请求需配置正确的fetch参数，避免缓存干扰：

const res = await fetch('http://localhost:1337/api/your-collection', {
  headers: { 'Content-Type': 'application/json' },
  cache: 'no-store'
});
const data = await res.json();

• Pages Router中，建议在getServerSideProps或getStaticProps内发起请求，避免客户端直接请求引发跨域问题。

4. 查看Strapi详细日志 #

启动Strapi时执行npm run develop -- --verbose，或查看项目根目录logs文件夹内的日志文件，里面会记录具体错误原因（如权限不足、数据库连接异常等）。

5. 重置依赖环境 #

尽管Node 18.12.1在Strapi 4.5.3兼容范围内，仍可尝试清除依赖重新安装：

# 重置Strapi项目依赖
rm -rf node_modules package-lock.json
npm install

# 重置Next.js项目依赖
cd ../your-nextjs-project
rm -rf node_modules package-lock.json
npm install

6. 确认认证头配置 #

若API需要认证，确保请求携带正确的Authorization头（如Bearer token）。先用Postman测试带token的请求是否正常，再同步到Next.js代码中。

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