NuxtJS 3 $fetch refuse to connect to local server - laravel

Question

I am new to Nuxt3. I tried to connect my Nuxt3 app to my backend site which is built with Laravel. My frontend URL is http://localhost:3000 and my backend is http://localhost:8000. When I connect to http://localhost:8000/api/names using "useFetch" inside a component, it runs fine. But when I do it inside server/api/names.js using $fetch, it shows a 500 (Internal server error).
This runs fine (sample.vue)
const getNames = async () => {
let { data } = await useFetch('http://localhost:8000/api/names')
console.log(data);
}
This does not
(sample.vue)
const getNames = async () => {
let { data } = await useFetch('/api/names')
console.log(data);
}
(/server/api/names.js)
export default defineEventHandler(async (event) => {
const { data } = await $fetch("http://localhost:8000/api/names");
return { data };
});
Here's the code on my Laravel app inside api.php (http://localhost:8000/api/names)
Route::get('/names', function (){
$users_name = User::all()->pluck('name');
return response()->json(['names' => $users_name]);
});
Here's the error that shows when I go to network tab
message: "terminated"
stack: "<pre><span class=\"stack internal\">at Fetch.onAborted (node:internal/deps/undici/undici:11000:53)</span>\n<span class=\"stack\">at Fetch.emit (node:events:513:28)</span>\n<span class=\"stack internal\">at Fetch.terminate (node:internal/deps/undici/undici:10272:14)</span>\n<span class=\"stack internal\">at Object.onError (node:internal/deps/undici/undici:11095:36)</span>\n<span class=\"stack internal\">at Request.onError (node:internal/deps/undici/undici:6477:31)</span>\n<span class=\"stack internal\">at errorRequest (node:internal/deps/undici/undici:8440:17)</span>\n<span class=\"stack internal\">at Socket.onSocketClose (node:internal/deps/undici/undici:7895:9)</span>\n<span class=\"stack\">at Socket.emit (node:events:513:28)</span>\n<span class=\"stack\">at TCP.<anonymous> (node:net:313:12)</span></pre>"
statusCode: 500
statusMessage: ""
url: "/api/names"
I tried to restart both servers hoping that doing this would fix the issue but the problem still persists. Also searched if it has something to do with CORS but it connects when I call the api inside a component.

Answer 1

I had exactly the same problem yesterday and luckily I found a solution without having to downgrade the version of NodeJS because Nuxt3 does not work well under version 16 of Node.
First use Laragon for your Laravel Backend. Laragon automatically creates Hostname for projects ex: laravelbackend.test if the project folder is called "laravelbackend".
Then on the file (/server/api/names.js) replace localhost:8000/api with laravelbackend.test/api
export default defineEventHandler(async (event) => {
const { data } = await $fetch("http://laravelbackend.test/api/names");
return { data };
});