N
Nuxt•3w ago
mentalrob

<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 its strapi 5.
3 Replies
kapa.ai
kapa.ai•3w ago
Hi @mentalrob. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I can offer some insights and suggestions regarding your issue with $fetch in Nuxt when trying to connect to your Strapi endpoint. The error you're encountering, "<no response> fetch failed", suggests that there might be an issue with the connection between your Nuxt application and the Strapi server. Here are a few things to consider: 1. Server-side vs. Client-side rendering: As mentioned in the Nuxt documentation on $fetch, when using $fetch during server-side rendering, it will directly call the relevant function, emulating the request. However, this might cause issues if your Strapi server is not accessible from the Nuxt server environment. 2. Environment configuration: Make sure that your Nuxt application is correctly configured to access the Strapi server. You might need to set up environment variables or runtime config to handle different environments (development, production, etc.). 3. CORS issues: If the Strapi server is running on a different domain or port, you might encounter CORS (Cross-Origin Resource Sharing) issues. Ensure that Strapi is configured to allow requests from your Nuxt application's origin. 4. Network access: Verify that the Strapi server is running and accessible from the environment where your Nuxt application is executing the $fetch call. To address these potential issues, you could try the following: 1. Use useFetch instead of $fetch: The useFetch composable is designed to handle SSR-safe network calls. It might help resolve issues related to server-side rendering. Here's how you could modify your code: 
   <script setup>
   const { data, error } = await useFetch('<http://localhost:1337/api/blog-posts'>)
   
   if (error.value) {
     console.error('Error fetching blog posts:', error.value)
   } else {
     console.log(data.value)
   }
   </script>
   
   <script setup>
   const { data, error } = await useFetch('<http://localhost:1337/api/blog-posts'>)
   
   if (error.value) {
     console.error('Error fetching blog posts:', error.value)
   } else {
     console.log(data.value)
   }
   </script>
2. Configure runtime config: Set up a runtime config in your nuxt.config.ts file to handle different environments: 
   export default defineNuxtConfig({
     runtimeConfig: {
       public: {
         strapiBaseUrl: process.env.STRAPI_BASE_URL || '<http://localhost:1337'>
       }
     }
   })
   
   export default defineNuxtConfig({
     runtimeConfig: {
       public: {
         strapiBaseUrl: process.env.STRAPI_BASE_URL || '<http://localhost:1337'>
       }
     }
   })
Then use it in your component: 
   <script setup>
   const config = useRuntimeConfig()
   const { data, error } = await useFetch(`${config.public.strapiBaseUrl}/api/blog-posts`)
   </script>
   
   <script setup>
   const config = useRuntimeConfig()
   const { data, error } = await useFetch(`${config.public.strapiBaseUrl}/api/blog-posts`)
   </script>
3. Handle CORS in Strapi: Make sure your Strapi configuration allows requests from your Nuxt application's origin. 4. Check network access: Ensure that the Strapi server is running and accessible from the environment where your Nuxt application is executing the fetch call. If these suggestions don't resolve the issue, you might need to investigate further by checking the network tab in your browser's developer tools or using server-side logging to get more information about the failed request. Nuxt Documentation on Data Fetching provides more detailed information on best practices for fetching data in Nuxt applications. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3w ago
<@214309928494432257> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
mentalrob
mentalrobOP•3w ago
If i put it on onMounted it works fine but then ssr fails. I found the fix if i change localhost to 127.0.0.1 it works fine but why i don't know maybe thats an issue with nuxt ? if someone enlightens me why this is happening i will be very cheerful, working on this silly issue for like ~3 hours

Did you find this page helpful?