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
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
Replace
localhost
with127.0.0.1
.For example,
http://127.0.0.1:1337/api/hello-world?locale=es-ES&populate=*
by changingstrapiURL
fromhttp://localhost:1337
tohttp://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.