Sending Content Type Headers in Node.js4:36 with Andrew Chalkley
You can specify what type of content you serve by modifying a header called Content-Type.
[MUSIC] 0:00 As part of the HTTP specification, or how servers and browsers agree to talk to each 0:04 other, there are values that are hidden from the user called Headers. 0:09 These headers can be programmatically created by the clients and the server. 0:14 Once each headed that the service ends, it's called Content Type. 0:19 The instructs the browser how to handle the string of information in the response. 0:24 The browser would have no other way of knowing what to do with it. 0:29 The data in the response looks the same to the browser, just a string of data. 0:32 Let's take a look at our code right now, 0:38 to see why our response is being handled as plain text and not as HTML. 0:41 Okay, so let's take a look in our renderer, and 0:47 see that we've got this here. 0:51 The content type with text plain HTML. 0:54 Now, this is repeated in multiple places, so let's create a common header. 0:57 [BLANK_AUDIO] 1:02 And. 1:15 Set that variable to what we have everywhere in our code. 1:16 So, there we go and 1:22 there we go. 1:27 So at the top here we've got common headers and 1:32 we've go the content type set to text plain. 1:35 But what should we change it to? 1:38 So let's look in Google and see what it comes up with. 1:40 So internet content types. 1:47 And the first is the internet media type on Wikipedia. 1:55 Let's take a look. 1:59 So, if we scroll down, we should see a list. 2:02 So, we've got Type application, we've got Type audio, we've got Type example, 2:06 we've got Type image and those are all the common image formats, Type message, 2:11 Type model, Type multipart, Type text. 2:16 And we've got text/html. 2:19 So let's copy and paste that. 2:24 And go back to our code, and 2:26 swap out text plain to text/html. 2:30 And let's start the app. 2:34 And go to port 3000. 2:42 And there we have it. 2:44 We've got the search page. 2:46 We've got the profile page. 2:49 There's me. 2:50 And. 2:55 We've got an error page. 2:56 Cool. So it is, 3:01 there was an error in guessing the profile of chalkers123. 3:02 Not found. 3:04 So let's go back to the content side. 3:09 Before we have the browser thinking that it was textual data because 3:11 the content type was text plain. 3:15 So we changed it back to text/html. 3:18 Now on this page here is probably all the content types that you'll 3:21 ever need to programatically do. 3:25 So there's application/pdf for example, 3:27 which will launch a PDF document viewer. 3:32 This image/jpeg. 3:37 Which is for JPEG images. 3:39 Image/gif, image/png, and so forth. 3:41 So if you're ever need to serve these types of files, 3:45 you may want to change the content type. 3:49 Or if you dynamically generating a PNG or 3:52 a JPEG, you may want to set the content type. 3:57 So in your web development career, you probably want to reference 4:00 something like this when you're programming dynamic things like JSON. 4:05 If you're making an API for example, 4:11 you'd want to do application JSON, or you'd want to do XML. 4:12 In doubt, various different formats, so 4:18 if you were creating a RSS atom feed, you would use application atom plus XML. 4:20 So this is what you would do when you're creating larger websites, 4:25 but since we're just dealing with HTML right now, we'd, 4:30 we'd just using the text HTML content type. 4:33
You need to sign up for Treehouse in order to download course files.Sign up