大家好，我是IT修真院成都分院第5期的学员，一枚正直纯洁善良的web程序员
一.背景介绍：
作为一个Web开发人员，日常中与我们开发相关的，就是Chrome的开发者工具。 Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响 应头还有响应内容很有用，特别是在查看Ajax类请求的时候，非常有帮助。 今天就是要简要说说Chrome的开发者工具中Network中header部分。
二.知识剖析
1.找到Network下的Header
首先我们打开chrome的开发者工具，选中network，再刷新页面，此时可以在下方看到一个Name，Name对应的是资源的名称及其路径，Status是请求服务器返回的状态码,当状态码为200时，则表示接口配置成功。点击任一文件名，右侧则会出现Header选项。下面让我们来详细看下Header中的各项是什么意思。
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 服务端对该资源最后修改的时间
Server:nginx/1.2.4 服务端的Web服务端名
Transfer-Encoding:chunked 分块传递数据到客户端
Response Headers:
Accept:客户端能接收的资源类型
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/15052 来于哪里
User-Agent: 客户端版本号的名字
三.常见问题
使用post发送请求时如何设置content-type的值
四.解决方案
$http中可以直接设置请求头：
headers：{“contentType‘：....}
1. application/x-www-form-urlencoded 最常见的POST提交格式，使用这个编码格式post的数据会以键值对的方式提交
2. multipart/form-data 通常上传图片等文件会使用这种编码格式提交。
3. application/json 提交JSON格式的数据
五.更多讨论
问题1：常见状态吗
回答1：200(状态码) OK
301 - 资源（网页等）被永久转移到其它URL
404 - 请求的资源（网页等）不存在
500 - 内部服务器错误
问题2：network主要应用场景
回答2：向服务器做请求时，方便看报错
问题3：为什么有不同的请求头
回答3：针对于请求的不同数组，告诉后台传送的类型
六.参考资料
Network中headers各项的意义_腾讯视频
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧~
戳我注册~
网友评论