这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【network中的请求信息，headers中的每一项分别是什么意义?】

【JS-5】network中的请求信息，headers中的每一项分别是什么意义?

大家好，我是IT修真院深圳分院第12期的学员韩鹏，一枚正直纯洁善良的前端程序员，今天给大家分享一下，修真院官网JS任务5，深度思考中的知识点——network中的请求信息，headers中的每一项分别是什么意义?

1.背景介绍

作为一个Web开发人员，日常中与我们开发相关的，就是Chrome的开发者工具。Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用，特别是在查看Ajax类请求的时候，非常有帮助。今天就是要简要说说Chrome的开发者工具中Network中header部分。

2.知识剖析

Network面板-请求表

Name：资源名称，点击名称可以查看资源的详情情况，包括Headers、Preview、Response、Cookies、Timing。

Status：HTTP状态码。

Type：请求的资源MIME类型。

Initiator：标记请求是由哪个对象或进程发起的（请求源）。

Parser： 请求由Chrome的HTML解析器时发起的。

Redirect：请求是由HTTP页面重定向发起的。

Script：请求是由Script脚本发起的。

Other：请求是由其他进程发起的，比如用户点击一个链接跳转到另一个页面或者在地址栏输入URL地址。

Size：从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示(from cache)

Time：请求或下载的时间，从发起Request到获取到Response所用的总时间。

Timeline：显示所有网络请求的可视化瀑布流(时间状态轴)，点击时间轴，可以查看该请求的详细信息，点击列头则可以根据指定的字段可以排序。

通过点击某个资源的Name可以查看该资源的详细信息，根据选择的资源类型显示的信息也不太一样，可能包括如下Tab信息：

Headers：该资源的HTTP头信息。

Preview：根据你所选择的资源类型（JSON、图片、文本）显示相应的预览。

Response：显示HTTP的Response信息。

Cookies：显示资源HTTP的Request和Response过程中的Cookies信息。

Timing：显示资源在整个请求生命周期过程中各部分花费的时间。

查看资源HTTP头信息

在Headers标签里面可以看到HTTP Request URL、HTTP Method、Status Code、Remote Address等基本信息和详细的Response Headers、Request Headers以及Query String Parameters或者Form Data等信息。

General部分:

Request URL:资源的请求url

Request Method:HTTP方法

Status Code:响应状态码

200（状态码） OK（原因短语）

301 - 资源（网页等）被永久转移到其它URL

404 - 请求的资源（网页等）不存在

500 - 内部服务器错误

Response Headers:

Content-Encoding:gzip ——压缩编码类型

Content-Type:text/html ——服务端发送的类型及采用的编码方式

Date:Tue, 14 Feb 2017 03:38:28 GMT ——客户端请求服务端的时间

Last-Modified:Fri, 10 Feb 2017 09:46:23 GMT ——服务端对该资源最后修改的时间，GMT是格林尼治标准时间

Server:nginx/1.2.4 ——服务端的Web服务端名

Transfer-Encoding:chunked ——分块传递数据到客户端

Request Headers:

Accept:text/html ——客户端能接收的资源类型

Accept-Encoding:gzip, deflate ——客户端能接收的压缩数据的类型

Accept-Language:en-US,en;q=0.8 ——客户端接收的语言类型

Cache-Control:no-cache ——服务端禁止客户端缓存页面数据

Connection:keep-alive ——维护客户端和服务端的连接关系

Cookie: ——客户端暂存服务端的信息

Host:www.jnshu.com ——连接的目标主机和端口号

Pragma:no-cache ——服务端禁止客户端缓存页面数据

Referer:http://www.jnshu.com/daily/12345 ——来于哪里

User-Agent: ——客户端版本号的名字

3.常见问题

使用post发送请求时如何设置content-type的值？

4.解决方案

常用的Content-Type值：

1. application/x-www-form-urlencoded 最常见的POST提交格式，使用这个编码格式post的数据会以键值对的方式提交

2. multipart/form-data 通常上传图片等文件会使用这种编码格式提交

3. application/json 提交JSON格式的数据

设置请求头的方法：

1、在http服务的在服务端发送请求时，也就是调用http()方法时，在config对象中设置请求头信息。事例如下：

            $http.post( url , data , {headers : {'My-Header' : 'value';}}).then(function( ){……});

这种方法的好处就是针对不同路径的请求，可以个性化配置请求头部，缺点就是，不同路径请求都需要单独配置。

2、第二种设置请求头信息的方式就是在$httpProvider.defaults.headers属性上直接配置。事例如下：

    angular.module('app', []).config(function($httpProvider) {$httpProvider.defaults.headers.common = { 'My-Header' : 'value' }})

$httpProvider.defaults.headers有不同的属性，如common、get、post、put等。因此可以在不同的http请求上面添加不同的头信息，common是指所有的请求方式。

这种方式添加请求头信息的优势就是可以给不同请求方式添加相同的请求头信息，缺点就是不能够为某些请求path添加个性化头信息。

5.代码实战

6.拓展思考

HTTP的缺点

通讯使用明文（不加密），内容可能会被监听；

不验证通讯方的身份，因此有可能遭遇伪装；

无法证明白报文的完整性，所以有可能已被篡改；

解决方法：使用HTTPS

HTTP + 加密 + 认证 + 完整性保护 = HTTPS

7.参考文献

参考一：HTTP请求头和响应头含义

参考二：content-type说明

参考三：Network面板

参考四：$http-设置http请求头

8.更多讨论

1、TIMELINE 时间轴中的不同颜色的线代表什么意思？

答：Timeline工具里面使用是4种颜色来表示不同类别的事件: 
            蓝色：加载；黄色：脚本；紫色：渲染；绿色：绘制；

2、所有请求都有Content-Type吗？

答：GET 请求不存在请求实体部分，键值对参数放置在 URL 尾部，浏览器把form数据转换成一个字串（name1=value1&name2=value2...），然后把这个字串追加到url后面，用?分割，加载这个新的url。因此请求头不需要设置 Content-Type 字段。

3、除了已讲的两种，还有什么方法设置Content-Type吗？

答：有的。

第三种设置请求头信息的地方是$httpProvider.interceptors。也就是为请求或相应注册一个拦截器。使用这这方式我们首先需要定义一个服务。

    myModule.factory('authInterceptor', function($rootScope,  $cookies){return {request: function(config){config.headers = config.headers || {};if($cookies.get('token')){config.headers.authorization = 'Bearer ' + $cookies.get('token');}return config;},responseError: function(response){// ...}};})

然后把上面定义的服务注册到$httpProvider.interceptors中。

    .config(function($httpProvider){$httpProvider.interceptors.push('authInterceptor');})