1
00:00:02,180 --> 00:00:04,370
Headers can be important. Now

2
00:00:04,370 --> 00:00:06,700
thus far we haven't really needed them

3
00:00:06,800 --> 00:00:13,760
but for some APIs, you need to describe which type of data you sending for example or other APIs might

4
00:00:13,760 --> 00:00:18,710
need some extra authentication data and headers are basically metadata

5
00:00:18,710 --> 00:00:24,410
you can attach to outgoing requests. If you inspect requests, you see there are some default headers added

6
00:00:24,410 --> 00:00:29,670
by the browser and the response also has headers set by the server.

7
00:00:29,690 --> 00:00:37,670
Now we can add more headers to the outgoing request and we do that here on fetch by adding a new key

8
00:00:37,700 --> 00:00:41,870
to that configuration object which is the headers key.

9
00:00:41,870 --> 00:00:47,810
This takes a Javascript object where every header which you want to add is a key-value pair.

10
00:00:47,900 --> 00:00:52,510
Now the types of headers you can add are generally standardised,

11
00:00:52,520 --> 00:00:58,670
there are some default headers which are typically used but you can also add any arbitrary header you're

12
00:00:58,670 --> 00:00:59,550
coming up with,

13
00:00:59,570 --> 00:01:06,470
so you're really flexible there. Of course a header makes only sense to be added if the server expects

14
00:01:06,470 --> 00:01:08,170
it and does something with it,

15
00:01:08,330 --> 00:01:11,820
otherwise you can add it but it won't have much effect.

16
00:01:11,900 --> 00:01:17,330
Now a header which is often added, even though it's technically not required here for this API is the

17
00:01:17,330 --> 00:01:25,190
content-type header, typically written like this. Content type has a value, so that's the key name

18
00:01:25,190 --> 00:01:29,310
here, has to be in quotes because of the special dash character here,

19
00:01:29,390 --> 00:01:34,330
the value for that header then is application/json,

20
00:01:34,370 --> 00:01:40,580
that's one of the typical headers you add to outgoing requests which carry JSON data, this tells

21
00:01:40,580 --> 00:01:48,110
the server hey my request has JSON data. Now our dummy server here, JSONPlaceholder, does not care

22
00:01:48,380 --> 00:01:55,220
because it always just expects JSON data, other APIs might care and then this is how you could add

23
00:01:55,220 --> 00:02:00,690
your header. You can of course add more than one header by adding more than one key-value pair here.

24
00:02:00,710 --> 00:02:03,960
Now let's see if that works, if I add this header here,

25
00:02:04,280 --> 00:02:13,130
if I reload and I fetch my data, we see that on this fetch request if we scroll down to our request headers,

26
00:02:13,850 --> 00:02:16,160
here is the content type application/json

27
00:02:16,160 --> 00:02:18,160
header we just added,

28
00:02:18,350 --> 00:02:24,620
so this is how you can add headers with the fetch API. On XMLHttpRequest, it would have worked

29
00:02:24,650 --> 00:02:25,500
as well,

30
00:02:25,700 --> 00:02:35,090
there you have to set request header method where the first argument is the header name, content type

31
00:02:35,270 --> 00:02:41,900
and the second argument is the value for that header, application/json and you can add multiple

32
00:02:41,900 --> 00:02:47,180
headers by calling this method multiple times. Important, once a header is added with this method, you

33
00:02:47,180 --> 00:02:49,000
can't delete it.

34
00:02:49,080 --> 00:02:53,780
Now here, I'll comment this out of course because I don't need the XMLHttpRequest anymore but

35
00:02:53,780 --> 00:02:58,880
that is how you could have added headers there and this is how you add it with the fetch API.