<no response> fetch failed error on sending request to strapi via $fetch

Hello, i'm trying to implement a simple cms for my nuxt project. But the problem is when i use $fetch to send request to my strapi endpoint $fetch throws this error:

"http://localhost:1337/api/blog-posts": <no response> fetch failed

"http://localhost:1337/api/blog-posts": <no response> fetch failed

Here is the code i'm trying:

<template>
  <div class="container mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold mb-8">Blog Posts</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      
    </div>
  </div>
</template>

<script setup>
const res = await $fetch(`http://localhost:1337/api/blog-posts`) // $fetch fails here.
console.log(res)

</script>

<template>
  <div class="container mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold mb-8">Blog Posts</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      
    </div>
  </div>
</template>

<script setup>
const res = await $fetch(`http://localhost:1337/api/blog-posts`) // $fetch fails here.
console.log(res)

</script>

strapi is freshly installed with

pnpm dlx create-strapi-app@latest

pnpm dlx create-strapi-app@latest

its strapi 5.

<no response> fetch failed error on sending request to strapi via $fetch

Similar Threads