Next.js 13.4搜索页面Fetch JSON时遇CORS错误求助

问题根源 #

首页的fetch在服务器端执行（Next.js 13.4 App Router中，未使用客户端钩子的页面默认是服务器组件），不会触发浏览器的CORS机制；而搜索页面用了useSearchParams这个客户端专属钩子，导致整个页面变为客户端组件，fetch在浏览器端发起，目标服务器（jsonkeeper）未配置允许你的域名跨域，因此触发CORS错误。

你在next.config.js中配置的headers仅对自身项目的/api路由生效，无法控制外部服务器的CORS规则，所以不起作用。

有效解决方案 #

方案一：通过本地API路由转发请求（推荐） #

创建本地API路由，在服务器端请求外部数据，客户端页面调用该本地API，绕开浏览器的CORS限制：

1. 在app/api目录下新建search-data/route.js文件：

export async function GET() {
  const res = await fetch("https://www.jsonkeeper.com/b/YVMX", {
    next: { revalidate: 3600 } // 可选：设置1小时缓存，减少重复请求
  });
  const data = await res.json();
  return Response.json(data);
}

2. 修改搜索页面的fetch逻辑，调用本地API：

// 替换搜索页面中原有的fetch代码
const resultss = await fetch("/api/search-data");
const resultsss = await resultss.json();

方案二：拆分页面为服务器组件+客户端组件 #

将数据请求放在服务器组件中，客户端组件仅负责处理useSearchParams和渲染：

1. 创建服务器组件SearchServerComponent.js：

export default async function SearchServerComponent() {
  const res = await fetch("https://www.jsonkeeper.com/b/YVMX");
  return res.json();
}

2. 修改搜索页面，标记为客户端组件并引入服务器组件：

'use client'; // 必须添加该行，标记为客户端组件
import { useSearchParams } from "next/navigation";
import Footer from "../components/Footers";
import Header from "../components/header";
import { format } from "date-fns";
import InfoCard from "../components/InfoCard";
import SearchServerComponent from "./SearchServerComponent";

export default async function Search() {
  const searchParams = useSearchParams();
  // 保留原有的参数处理逻辑不变

  // 调用服务器组件获取数据
  const resultsss = await SearchServerComponent();

  // 保留原有的渲染逻辑不变
}

额外说明 #

• 不要在客户端组件中直接请求未配置CORS的外部接口，这是浏览器的安全机制，前端代码无法绕过（浏览器插件仅适用于开发环境，生产环境不可用）。
• 服务器端请求不受浏览器CORS限制，通过API路由或服务器组件转发是标准解决方案。

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