Getting Cors error in next js 13.4 app when trying to fetch json data

Here is the search/page where actual fetch request is situated.

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 Image from "next/image";
// export default async function searchRes() {
// };
// const searchRes = async () => {
//   const resultss = await fetch("https://www.jsonkeeper.com/b/YVMX");
//   const resultsss = await resultss.json();
//   return resultsss;
// };
export default async function Search() {
// const resultsss = await searchRes();
const searchParams = useSearchParams();
const locations = searchParams.get("locations");
const startDate = searchParams.get("startDate");
const endDate = searchParams.get("endDate");
const noOfGuests = searchParams.get("noOfGuests");
const formatStartDate = format(new Date(startDate), "dd MMMM");
const formatEndDate = format(new Date(endDate), "dd MMMM");
const days = `${formatStartDate} - ${formatEndDate}`;
const resultss = await fetch("https://www.jsonkeeper.com/b/YVMX"
, {
method: 'GET',
// mode: 'no-cors',
// headers: {
//   "Access-Control-Allow-Headers" : "Content-Type",
//   "Access-Control-Allow-Origin": "*",
//   "Access-Control-Allow-Methods": "OPTIONS,POST,GET",
// },
}
)
// .then((res)=>res.json);
const resultsss = await resultss.json();
console.log(resultsss);
// const resultsss = await resultss();
// const resultsss = await searchRes();
return (
<div>
<Header
placeholder={`${locations}  | ${days} | ${noOfGuests} guest(s)`}
/>
<main className="mx-3">
<p className="text-xs md:text-sm mt-3">
50+ Stays {days} for {noOfGuests} guest(s)
</p>
<h1 className="text-lg  md:text-2xl  font-bold mt-2 mb-5">
Stays in {locations}
</h1>
<div className="mb-5 mr-3">
<button className="text-xs  md:text-sm rounded-full px-3 py-2 border-gray-300 border hover:shadow-md  active:bg-slate-100 mr-2 mb-2  ">
Free Cancellation
</button>
<button className="text-xs md:text-sm rounded-full px-2 py-2 border-gray-300 border hover:shadow-md  active:bg-slate-100 mr-2 mb-2   ">
Type of place
</button>
<button className="text-xs md:text-sm rounded-full px-2 py-2 border-gray-300 border hover:shadow-md  active:bg-slate-100 mr-2 mb-2   ">
Price
</button>
<button className="text-xs md:text-sm rounded-full px-2 py-2 border-gray-300 border hover:shadow-md  active:bg-slate-100 mr-2 mb-2   ">
Dormitory
</button>
<button className="text-xs md:text-sm rounded-full px-2 py-2 border-gray-300 border hover:shadow-md  active:bg-slate-100 mr-2 mb-2  ">
More filters
</button>
</div>
<div className=" ">
{resultsss?.map(
({
img,
key,
location,
title,
description,
star,
price,
total,
}) => (
<InfoCard
key={total}
img={img}
location={location}
title={title}
description={description}
star={star}
price={price}
total={total}
/>
)
)}
</div>
</main>
<Footer />
</div>
);
}
// export default Search;
// https://jsonkeeper.com/b/Z5I9
// for indian currency https://www.jsonkeeper.com/b/YVMX
// https://cors-anywhere.herokuapp.com/

Next.config

const nextConfig = {};
module.exports = {
async headers() {
return [
{
// matching all API routes
source: "/api/:path*",
headers: [
{ key: "Access-Control-Allow-Credentials", value: "true" },
{ key: "Access-Control-Allow-Origin", value: "*" },
{
key: "Access-Control-Allow-Methods",
value: "GET,OPTIONS,PATCH,DELETE,POST,PUT",
},
{
key: "Access-Control-Allow-Headers",
value:
"X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version",
},
],
},
];
},
images: {
domains: ["links.papareact.com"],
},
};
nextConfig;

Everything is working fine when cors extension is enabled on chrome.
Also I am using fetch to pull data from same source in page i.. under the app and it is working very fine. see its code as well.

import LargeCard from "./components/LargeCard";
import MediumCard from "./components/MediumCard";
import SmallCard from "./components/SmallCard";
import Footer from "./components/Footers";
import Header from "./components/header";
export default async function Home() {
const res1 = await fetch("https://www.jsonkeeper.com/b/IJK5");
const res2 = await fetch("https://www.jsonkeeper.com/b/OJBH");
const data1 = await res1.json();
const data11 = data1;
const data2 = await res2.json();
const data22 = data2;
return (
<>
<Header />
<Banner />
{/* SmallCardSection */}
<div className="  max-w-7xl mx-auto mt-5  pb-5  ">
<h2 className=" ml-5 text-2xl font-bold">Explore Nearby</h2>
<div className=" grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4  ">
{data11?.map((item) => (
<SmallCard
key={item.key}
img={item.img}
location={item.location}
distance={item.distance}
/>
))}
</div>
</div>
{/* MediumCardSection */}
<section className="  max-w-7xl mx-auto mt-5   pb-5  ">
<h2 className=" text-2xl font-bold ml-5">Live Anywhere</h2>
<div className="  relative flex flex-row space-x-3 overflow-scroll scrollbar-hide pl-5">
{data22?.map((item) => (
<MediumCard img={item.img} key={item.id} title={item.title} />
))}
</div>
</section>
<div className="max-w-7xl mx-auto pl-5 pr-5 lg:pr-10 ">
<LargeCard
title={"The Greatest Outdoors"}
description={"Wishlists curated by Airbnb."}
buttonText={"Get Inspired"}
/>
</div>
<div className=" ">
<Footer />
</div>
</>
);
}

I am making this project for study purpose so, not having that much knowledge

Can you add destination key for your api domain?

// next.config.js
module.exports = {
async rewrites() {
return [
{
source: '/api/:path*',
destination: 'https://www.jsonkeeper.com/:path*',
}
]
}
};