$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 🤔
67 Replies
The console logs for 2 and res never display in the console
But the
1
does@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
yes i got this
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.
i got 204
the localhost:3001 is for my API
the 2 other screens are from my Nest API
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
Actually, nevermind, it send me 2 request (i think)
One is pending
Can you show the body of the fetch?
I meant the request tab here 🙂
Of the fetch request which is pending
And thats correct that always happens.
I don't find it :sad:
is it supposed to be there ?
The other one
And then send that screenshot again 🙂
mb
The payload tab
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
:Frog_hmm_MJ:
Try to make a request with Postman to your API and see if that works 🙂
I can try this only in like 6 hours
I can make you an update
204 means empty content - maybe there is nothing to console.log?
Sounds like a CORS issue to me 🤔
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
res is my $fetch function, i just put it in utils
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.
oh
Thats why
if(res)
is not being triggeredI'm not shure to understand, does it mean that the API return nothing ?
You can use
.then().catch()
to react to empty content
CorrectBut i did this 🤔
it does console log the data in my API console
but idk if it's returning the data
seems like not
I assumed it said 204 as you said it did.
Here
Yes, i saw it there
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?
okay
No, i added some console logs before and after the API call
Only the logs before the API call showed
The CORS error is being thrown by your browser, not you code.
I got this
Yes, i mean the browser
Only browser do throw CORS errors
Thats how it looks if you have cors problems
i got no CORS error
You enabled errors, yes?
Be sure to have errors enabled:
I guess so
i did in my api
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.
I'm not shure, but is it there ?
Fetch/XHR
It's easier to detect if you open the Console tab, not the network tab
Yes, my bad
I do
:sueur:
Can you send a screenshot of the sign-in call from the Console view
That's a signup call that i did before
Can't find one while you were on the Console tab that shows the XHR requests
The console show nothing
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.
Be sure to not expose any sensible credentials
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
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
Supabase authentication column of an user :
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