Preview
Video Player
00:00
00:00
Sending Content Type Headers in Node.js
4:36You 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