2.3 HTTP Post Request with fetch() - Working with Data and APIs in JavaScript
ฝัง
- เผยแพร่เมื่อ 22 ส.ค. 2024
- 💻github.com/Cod...
We are now in Module #2! In the previous module, we focused on client-side JavaScript. We now will learn the basics of server-side programming with Node.
2.3 Let's take data from the client and send it to the server. This video covers routing, JSON parsing, and HTTP POST requests with fetch().
🎥 NEXT LESSON: • 2.4 Saving to a Databa...
🎥 PREVIOUS LESSON: • 2.2 Geolocation Web AP...
🎥 FULL COURSE: • Working with Data and ...
🚂 Website: thecodingtrain....
💖 Patreon: / codingtrain
🛒 Store: www.designbyhu...
📚 Books: www.amazon.com...
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 Processing: processing.org
📄 Code of Conduct: github.com/Cod...
My day is always better when I see new Coding Train videos.
Is he your dad??
You can not imagine how long i searched for such a tutorial. Thank you. Just Thank you.
Me to this is great!
This guy seriously makes the best tutorial content on TH-cam. I've learned SO much, all thanks to this guy. His videos are legit worth $1000s in semesters at my university. And no pressure of being graded!
I've seen several instructional videos from you and I'm still impressed by the clarity of this despite the fact that you're very quick, but clear about what it's all about.
Sometimes it looks like an Attention Deficit Hyperactivity Disorder (ADHD), but this is a natural gift in your case.
Thank you very much and go on with it.
This was the most comprehensive nuts-and-bolts explanation of fetch API I could find. Most other videos don't even come close. Thank you.
Learning back-end coding at the moment. These videos are seriously awesome. Well-taught, good production, and helps so so much.
oh just great. I tried learning this and googled questions and tried it out for an hour. And then when I finished I saw this video.
THanks youtube.
I've struggled with this for weeks. And finally, I found The Coding Train videos and they made it all so simple. Thank you man!
Can I just say. I first started coding about 4 years ago as a hobby, these videos were always a constant source of joy and fun for me back then. I'm now a full-stack dev at a blockchain based startup, 4 years later I still love your videos. THANK YOU!! :)
Great clarity for a person who really struggles to comprehend concepts delivered by stackoverflow people, you put it visually, legibly and repeatedly so the audience can review, re-review at their own pace. Thank you for helping everyone.
I have no words, stumbled upon this and learnt quite possibly the most important way of client server interactions I have been trying to learn for months.
I love the way u teach and the happiness u display, makes me remember when I was still a kid, thanks for that enthusiasm, smiles
I have watched this video so much for when I need help on fetch's! You are an invaluable human, thank you for your brilliant work!
I have been struggling with this server side stuff for DAYS, i go to coding train and 20 minutes later i know all i needed and been trying to learn for so long. You sir, are incredible
Your videos are so useful for me.
I have learned a lot about javascript through your videos.
Thank you
The way you explain things makes me fall in love with coding. thank you so much.
Realllly man... Tonsss of thanks❤️❤️❤️❤️❤️🙇🙇.. after browsing through the internet, after going through several post cannot figure out this simple feature, that u explain in this short video.. i am really glad 😊
This guy is the best teacher heaven has sent for developers 😊
Thank you, Daniel! Your energy and charisma are priceless. Getting mood and knowledge :)
Coding Train guy, I really appreciate your hard work. I know these videos take a lot of work to produce and you are the best for putting these out here. Also, you should say your name more, so we can buy your book!!!
This is the tutorial I have been looking for. Thanks a lot! Love everything about the tutorial. Including the new haircut!
so easy to understand. after so many hours of finding my mistake and failing you saved the day. thx sir
Man, I'm getting crazy just to understand what headers are, but this video made many things clearer to me than I expected!
You are heaven sent, thank you! best node.js teacher on TH-cam by far
Unfortunate this Video has only ~80k views. The Best Explanation ever.. I kind of love coding now because of you . Thank You so much
Just found out this channel, I could tell you're a GREAT teacher, thank you for this simple explanation!!!!!
This series is super. I have been working on a project that is using these things but I didn't know how some parts of this project work. Awesome! :)
This video is simply amazing!!! I finally understood how the server and the client communicate each other, which I couldn't understand for more than a month in the course where I paid 800 euro!
your classes are so much fun! congrats on being so didactic
not sure if you truly mean 'didactic'?
Wow I did not know how much I needed this! You actually make learning fun! Thank you so much :) My classes are very dry and boring in comparison.
after days of post tutorials finally i understood .thanks bro
Off the bat, I love your teaching style. Very clear.
Every time I watch your video, I feel lucky for whatever reason!!!
Dear you are great Teacher and your teaching style best for any student who just come to your channel.👏
I cannot thank you enough for this, it has helped me with my personal projects so much.
Spent two hours trying to figure out why req.body was returning undefined before coming across this tutorial... Thanks for making it
i am still getting undefined wtf?)
Great video every time i re-watch I pick a little more
Glad to hear it!
Honnetly i dont speak english very weel and it the same to leastening somebody speaking quicly in english, but your video make me understand how node and api communicate. So thank u so much
just what I was looking for, thank you for this video!
Very nice video, I searched a long time for a video like this. Thanks!
Man, you are awesome. I'm from Brazil and I always excited when youtube sugest to watch one of your videos. I have learning a lot! Thanks
By the way, nice haircut. ;)
Love the bell at the beginnings :D
Great stuff as always!!
EXACTLY what i needed. Firefox didnt like how i passed the information through i guess. Works now thanks to you!
It's a beautiful day in the neighborhood, a beautiful day in the neighborhood, won't you be, my neighbor... sorry, love your tutorials but you reminded me of a childhood memory within the first 1 second of this video... LOL! had to comment (Mr Rogers if anyone remembers [Canadian TV show]). lol
I had trouble with the POST fetch request when using live server.
If you are having the same problem open "localhost:3000" in the browser instead of using the tab that live server uses.
THANKS!!!!!!!!!! It was making me insane - what a trooper!
I had some udemy courses on node but your videos have a different taste 🙂 I am glad you exist 😄 thanks for everything
The way u introduce node was so helpful for me thanks alot man
'API' instead of 'Rainbow'? my my.. that haircut has made you too sensible!!
:) Great video as always
Really appreciate your approach and enthusiasm! Makes understanding this stuff easier, for sure. Great content and explanations. Thank you!!!
Awesome tutorial, best teacher ... ever ...thanks a lot !!
I owe you a coffee for the help. This POST/GET things is killing me in my learning adventure!
man, those headers always get me. Thanks for the video!
Thank you for USE this type of teaching technic. Love From INDIA
Quick question. I did every video step by step up to this point and i always get this error:
POST 127.0.0.1:5500/api 405 (Method Not Allowed)
Can someone help me about this? I am trying for a month now and I am hetting nowhere.
I've downloaded your code as well and the error is still there. Please help!
I had the same problem and so I made a directory(folder) called "api" inside the same directory as index.js. It seems to have solved it.
Ok, I found the solution for the ERR_ABORTED 405 (Method Not Allowed)
The error appears in the console of our index.html file when accessing the file DIRECTLY (in my case via VS Code - Live Server). By accessing directly to the file we somehow bypass the server logic or functionality.
In order for the correct Server-Client functionality work we must enter the server via the URL "localhost:(whichever port its listening)" and as a result, the server will display the index.html and all the fetch functionalities should work. Cheers!
I am a student from Uganda learning react Native. But I was looking for away to deal with API and now I have learnt thanks to "What does it mean to be a bubble?". Thanks
Uhuu, after 4 days of lazy work i finally finished the exercises that he proposed in the video :D Ty Daniel
I still didn't see the video. But that background already transmits me good vibes haha. Thank you!.
This is guy is so damn energetic. Makes things fun
this channel and the net ninja channel are just crazy filled with information 😍
Im searching for this from the past 3 hrs. Thank u so much
You make everything so understandable!
!!!!Important: I did all kinds of things and could never get body-parser or the new express.json() to work... And I finally figured out the problem was caused on Postman's side !
I was sending a RAW payload and it was being sent as Text instead of JSON ! I changed that to JSON and everything worked 😊
Hope this helps 😄
That really made my day cleared all my queries.. Thanks Love from India
GOoooD, you saved me lol.
Hello from Mozambique here! :D
Your video helped me a lot in my college project works. Thanks a lot😉
My day always better when I code
Thank you so much, this is what I was looking for and of course you had a video on it.
I'm so so so grateful for this channel!!!
They are great videos, I have learned a lot. I followed your instructions step by step but I couldn't save it to a database. spent the whole day again and again but no luck !
Thank you. you saved my life.
Followed the video step by step but im getting a 405 error saying method not allowed for my fetch api, any fix for this?
The same. Have you found a solution?
@@Devilman91 Ok, I found the solution for the ERR_ABORTED 405 (Method Not Allowed)
The error appears in the console of our index.html file when accessing the file DIRECTLY (in my case via VS Code - Live Server). By accessing directly to the file we somehow bypass the server logic or functionality.
In order for the correct Server-Client functionality work we must enter the server via the URL "localhost:(whichever port its listening)" and as a result, the server will display the index.html and all the fetch functionalities should work. Cheers!
damn! i missed the express.json() in app.js and struggling all day why I get undefined in console .. u saved me now dude! Thanks a lot
great hair cut Dan, loved it! nice to see your quotidian jokes always!!
finally i found this after thank u so much I was very confused how fetch works
Great tutorial and explaination! Thanks! That space indentation makes me uncomfortable though.
This video saved my life. Thank you so much :')
You are GOATED man, Thanks
thank you very much you fixed my problem
very good tutorial and just subscribed. Looking forward to your machine learning courses :)
thanks a lot sir
You’re amazing at teaching 👏👏👏
Your tutorials are great and so fun :)
Jeez Louise, and I thought XMLHttpRequest was confusing!
This one's going to take some digesting.
That was insanely helpful...
It is always a pleasure to watch your video. I appreciate the fun energy and vibe you bring to teaching. You should look into paid teaching platform like udacity and udemy.
Coding Train is great, but I keep wondering why Dan never runs into any CORS problems. Half of the fetch() calls I am making result in "Cross-Origin Request Blocked" errors. Extremely frustrating, as the documentation about CORS I have found so far is written in languages I don't understand, probably Sumerian or Etruscan.
In all of my examples here I am making the request to the server hosting the code, so there are no CORS errors. I should DEFINITELY address how this works more in future videos!
@@TheCodingTrain Thanks Daniel. I think I have figured it out by now, like a grown-up, but it is indeed confusing for a newbie. Especially when I get a same-origin error when innocently fetching something from the local filesystem (video 1.1).
amazing video man, its exactly what i was looking for 👍❤️
Awesome haircut, awesome video! :)
Your the best code sir 👌 ever..
Waiting for next episode of node.
Thanks.
where have you been all day of my life????????????.. .I've been looking for contents like this all my life, this on at 7:00
When i wrote fetch('/api', options); in my index.html file and refreshed the page, it said 405 Method Not Allowed. Is there something wrong in the server side that does not allow the method POST?
same thing here. Did you find what was wrong in your case?
Add another header in the object that you are posting using fetch...
mode: no-cors. This should solve it
@@rijuban4321 it didn't work for me, but thanks for trying
Ok, I found the solution for the ERR_ABORTED 405 (Method Not Allowed)
The error appears in the console of our index.html file when accessing the file DIRECTLY (in my case via VS Code - Live Server). By accessing directly to the file we somehow bypass the server logic or functionality.
In order for the correct Server-Client functionality work we must enter the server via the URL "localhost:(whichever port its listening)" and as a result, the server will display the index.html and all the fetch functionalities should work. Cheers!
@@sebastiaanvv Ok, I found the solution for the ERR_ABORTED 405 (Method Not Allowed)
The error appears in the console of our index.html file when accessing the file DIRECTLY (in my case via VS Code - Live Server). By accessing directly to the file we somehow bypass the server logic or functionality.
In order for the correct Server-Client functionality work we must enter the server via the URL "localhost:(whichever port its listening)" and as a result, the server will display the index.html and all the fetch functionalities should work. Cheers!
This guy is amazing!! Great video!!
Thanks for this, u did this as I requested.
Thankyou so much it is very helpful🎉
love you man, I have learned a lot from your videos.
I'm having a small issue. I can't get the data to transfer to the next page and I don't know how to fix it. My body is just constantly empty.
Mine too, have you found what causing the problem?
Also 'app.post' is flaged as "unresolved" in my Webstorm, I'm not sure why.
Yeah same here... if anyone of you solved this problem, then please send the solution
I had the same issue. It was a problem with my header.
@@tdsimpson Me too, I write 'header' instead of 'headerS'
This helped so much! Thank you! Love your videos!!
you are a saviour...Thank you very much
Thank you so much, professor 🥰
Hey, I've got a quick question.
When we first console.log'd the request, we got all of the data and it worked well, but when we specified request.body it didn't work anymore?
You said that we needed to add the ability to parse any incoming data. How come the server was able to parse everything, but needs extra syntax when we want something more specific?
Thank you for the great videos, these are really helping me out. I love your personality.
I was wondering the exact same thing... considering all that data was also in json format
Server did not parse the initial request data it just printed out whatever it received which was already in json format from client side but when we said request.body server had to parse it.