Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Kirsty Pollock
14,261 PointsHow can I see the POST body in Chrome Developer tools (example App)?
In Chrome Developer Tools, I can't seem to find how to see the POST body that's sent in the request from the example app when we add or update a question or answer.
I can see the request, and all the headers, the body doesn't seem to be anywhere, and I can't find much on the web, because the questions out there are always talking about forms, not REST API requests.
What have I missed?
4 Answers
Kristian Slosar
7,954 PointsHello Kristy,
If you are sending JSON data look for an Request Payload
Requests with Content-Type: application/json will show as Request Payload
Show us the screenshot, to see more.
and check out this answer from stackoverflow
Kirsty Pollock
14,261 PointsI looked for Payload Requests, but that whole section is just not there. I have "General", "Response Headers" and "Request Headers". That is it!
General
Request URL:http://localhost:3000/questions
Request Method:OPTIONS
Status Code:200 OK
Remote Address:[::1]:3000
Response Headers
view source
Access-Control-Allow-Headers:Origin, X-Requested-With, Content-Type, Accept
Access-Control-Allow-Methods:PUT,POST,DELETE
Access-Control-Allow-Origin:*
Connection:keep-alive
Content-Length:2
Content-Type:application/json; charset=utf-8
Date:Tue, 26 Jul 2016 14:05:12 GMT
ETag:W/"2-mZFLkyvTelC5g8XnyQrpOw"
X-Powered-By:Express
Request Headers
view source
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:accept, content-type
Access-Control-Request-Method:POST
Connection:keep-alive
Host:localhost:3000
Origin:http://localhost:3001
Referer:http://localhost:3001/
User-Agent:Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.76 Mobile Safari/537.36
I'd love to include a screenshot, but, dumb question, how do I add an image (from my local drive)?
Kristian Slosar
7,954 PointsThanks, you can upload the screenshot to any img hosting site (google one for you) and paste its url with MarkDown language.
From what I see here:
Request URL:http://localhost:3000/questions
Request Method:OPTIONS
Status Code:200 OK
Remote Address:[::1]:3000
You are looking at Preflighted requests. Not at the actual POST request. More you can see about it here: MDN
So it seems you are trying to post data from different origin or to different origin.
Share with us your implementation, to see whats going on really.
Kirsty Pollock
14,261 Pointsah, ok, have to find my own image storage location, just checking that was the case, I wondered if i'd missed an upload option.
I am running the example front end app from the teachers notes versus (my) finished Q&A API from this topic, exactly as described in "Next Steps". So yeah it's remote, API on one server, front end on another. That and the link is probably enough of a hint that I can do some better searching for guidance - thanks for that.
Also, I need to go learn what "Preflighted requests" means :-). (I was many years a desktop and DB apps developer, not so heavy on the web front-end, especially not debugging, I mainly did APIs).