$fecth not working properly

Hello all ! I'm using the $fetch function to call my API (for an auth system) But the thing is that i never got a response back and the process can not continue 🤔
No description
No description
No description
67 Replies
Aldebaran
Aldebaran3w ago
The console logs for 2 and res never display in the console But the 1 does
ILLuMiNaTe
ILLuMiNaTe3w ago
@Aldebaran If you remove the await on the fetch do they appear? If so there is an issue with your auth endpoint timing out. Which usually takes ~30seconds
Aldebaran
Aldebaran3w ago
yes i got this
No description
ILLuMiNaTe
ILLuMiNaTe3w ago
Can you open your network tap and check the status of the request? Also double check if localhost:3001 is correct since you are most likely using port 3000 as seen at your other code.
Aldebaran
Aldebaran3w ago
i got 204 the localhost:3001 is for my API the 2 other screens are from my Nest API
ILLuMiNaTe
ILLuMiNaTe3w ago
204 status would be a bit odd Sadly i do not happen to have a pc to test it myselg on hand. But what happens if you remove the json.stringify wrapper and just send the body object? You are currently sending a string with json headers
Aldebaran
Aldebaran3w ago
Actually, nevermind, it send me 2 request (i think)
No description
Aldebaran
Aldebaran3w ago
One is pending
ILLuMiNaTe
ILLuMiNaTe3w ago
Can you show the body of the fetch?
Aldebaran
Aldebaran3w ago
No description
ILLuMiNaTe
ILLuMiNaTe3w ago
I meant the request tab here 🙂 Of the fetch request which is pending And thats correct that always happens.
Aldebaran
Aldebaran3w ago
I don't find it :sad:
Aldebaran
Aldebaran3w ago
is it supposed to be there ?
No description
ILLuMiNaTe
ILLuMiNaTe3w ago
The other one And then send that screenshot again 🙂
Aldebaran
Aldebaran3w ago
mb
Aldebaran
Aldebaran3w ago
No description
ILLuMiNaTe
ILLuMiNaTe3w ago
The payload tab
Aldebaran
Aldebaran3w ago
No description
ILLuMiNaTe
ILLuMiNaTe3w ago
One thing i can see is that the request method is somehow not set in that request. Its just a regular get and not a post Hence your server cannot answer your request
Aldebaran
Aldebaran3w ago
:Frog_hmm_MJ:
ILLuMiNaTe
ILLuMiNaTe3w ago
Try to make a request with Postman to your API and see if that works 🙂
Aldebaran
Aldebaran3w ago
I can try this only in like 6 hours I can make you an update
Single
Single3w ago
204 means empty content - maybe there is nothing to console.log?
manniL
manniL3w ago
Sounds like a CORS issue to me 🤔
Aldebaran
Aldebaran3w ago
About that, i tried pinia to store the email of the user, i made a function with it, but it can't process because the API call is made before
Aldebaran
Aldebaran3w ago
No description
Aldebaran
Aldebaran3w ago
res is my $fetch function, i just put it in utils
Single
Single3w ago
204 empty content is the response-code. It says that your request was successful and there was no additional body required, thus it's empty.
Aldebaran
Aldebaran3w ago
oh
Single
Single3w ago
Thats why if(res) is not being triggered
Aldebaran
Aldebaran3w ago
I'm not shure to understand, does it mean that the API return nothing ?
Single
Single3w ago
You can use .then().catch() to react to empty content Correct
Aldebaran
Aldebaran3w ago
But i did this 🤔
No description
Aldebaran
Aldebaran3w ago
it does console log the data in my API console but idk if it's returning the data seems like not
Single
Single3w ago
I assumed it said 204 as you said it did. Here
Aldebaran
Aldebaran3w ago
Yes, i saw it there
Single
Single3w ago
Your browser is doing preflight requests (the OPTION request you see), it is possible that the 204 is being returned for this one (my backend is returning a 200 but that means nothing). Check with curl/postman if your login returns a body please. Curl/Postman do not care about CORS (preflight). Seems like the 204 is coming from your preflight request, you can safely ignore this. Does your browser show CORS errors in the console (be sure to enable error-logging) like @manniL / TheAlexLichter assumed?
Aldebaran
Aldebaran3w ago
okay No, i added some console logs before and after the API call Only the logs before the API call showed
Single
Single3w ago
The CORS error is being thrown by your browser, not you code.
Aldebaran
Aldebaran3w ago
I got this
No description
Aldebaran
Aldebaran3w ago
Yes, i mean the browser
Single
Single3w ago
Only browser do throw CORS errors
Single
Single3w ago
Thats how it looks if you have cors problems
No description
Aldebaran
Aldebaran3w ago
No description
Aldebaran
Aldebaran3w ago
i got no CORS error
Single
Single3w ago
You enabled errors, yes?
Single
Single3w ago
Be sure to have errors enabled:
No description
Aldebaran
Aldebaran3w ago
I guess so
No description
Aldebaran
Aldebaran3w ago
i did in my api
Single
Single3w ago
You need to enable it in your browser console. All of this has nothing to do with your code, per se. Its a security feature that modern Browsers implement to avoid spam.
Aldebaran
Aldebaran3w ago
I'm not shure, but is it there ?
No description
Aldebaran
Aldebaran3w ago
Fetch/XHR
Single
Single3w ago
It's easier to detect if you open the Console tab, not the network tab
Aldebaran
Aldebaran3w ago
No description
Aldebaran
Aldebaran3w ago
Yes, my bad
Aldebaran
Aldebaran3w ago
I do
No description
Aldebaran
Aldebaran3w ago
:sueur:
Single
Single3w ago
Can you send a screenshot of the sign-in call from the Console view
Aldebaran
Aldebaran3w ago
That's a signup call that i did before
Single
Single3w ago
Can't find one while you were on the Console tab that shows the XHR requests
Aldebaran
Aldebaran3w ago
The console show nothing
No description
Single
Single3w ago
Can you test CORS here: https://cors-test.codehappy.dev/
CORS Tester - Test a URL for valid CORS headers
Use this little tool to test a URLs CORS headers.
Single
Single3w ago
Be sure to not expose any sensible credentials
ILLuMiNaTe
ILLuMiNaTe3w ago
I doubt this is a cors issue. If it was it would have been logged in the console log and it would have thrown an error. Nuxt3 can send a preflight options request when fetching. The preflight request also doesnt hold any request data. However the second request is what matters. In this scenario the request is timing out because the POST request is not reaching the server. Hence its timing out and the await does not continue. I would first look whether the server accepts the post request at all. Do this with Postman
Aldebaran
Aldebaran3w ago
Hey ! I resolved the problem, but, i don't really know how 🤔 The only thing is that, when a user is clicking on the verification link, his email address does not turn to verified, idk if it's normal
Aldebaran
Aldebaran3w ago
Supabase authentication column of an user :
No description
Aldebaran
Aldebaran3w ago
When i clicked on the verification email link, i expected to this to turn into true but that's not the case Event the "email_confirmed_at": "2024-06-18 23:33:16.463158+00", is updated but not this