N
Nuxt6mo ago
Aldebaran

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