I've encountered an issue while attempting to fetch data from my .NET Core 7 API. The error message I'm receiving is as follows: *Unhandled Runtime Error Error: fetch failed
Call Stack Object.fetch node:internal/deps/undici/undici (11413:11) process.processTicksAndRejections node:internal/process/task_queues (95:5)*
Here's the code snippet:
import Image from 'next/image'
async function getChamps () {
const res = await fetch('https://localhost:7046/api/Champion')
if (!res.ok) { // ! Recommended to handle errors
throw new Error('Failed to fetch data')
}
return res.json() // ? return the data
}
export default async function ListOfChampions () {
const champions = await getChamps()
return (
<ul>
{champions.map(champ => (
<li key={champ.champion_id}>
<Image src={champ.image} alt={champ.name} />
<p>{champ.name}</p>
</li>
))}
</ul>
)
}
When trying to make a GET request to https://localhost:7046/api/Champion using POSTMAN or directly in the browser, it works. However, the fetch operation fails.
Any suggestions on how to resolve this problem?
I have already attempted configuring CORS in my API but with no success.