skip to Main Content

I am trying to get some data from my Stapi CMS through the API but I am getting an error.

in my useGetData.ts composable I am making a call to the server/api/get-data. I am getting back a 500 error [GET] "http://localhost:1337/api/hello-world?locale=es-ES&populate=*": <no response> fetch failed.

Calling the api from postman works ok. the api key and endpoints are correct. It is worth mentioning that if I change the enpoint from the local CMS to the one on the server everything works ok.

Does the server/api have issues when calling APIs that run locally?

useGetData.ts

 const {data, seo} = await $fetch('/api/strapi/retrieve-data', {
                method: 'POST',
                body: {locale: iso, collection: collection},
            })

server/api/get-data

 const data = await $fetch(`${strapiURL}/api/${body.collection}`, {
        method: "GET",
        headers: {
            "Authorization": `Bearer ${strapiToken}`
        },
        query: {locale: body.locale, populate: '*'}
    });

2

Answers


  1. Chosen as BEST ANSWER

    After a lot of debugging I found out that the reason it wasn't working is because the CMS was running locally under windows and my project was running under WSL


  2. Replace localhost with 127.0.0.1.

    For example, http://127.0.0.1:1337/api/hello-world?locale=es-ES&populate=* by changing strapiURL from http://localhost:1337 to http://127.0.0.1:1337.

    Apparently, it’s a Node >17 feature that affects $fetch. Read more here: https://github.com/nuxt/nuxt/issues/12358.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search