HTTP not by Browser

大家好！今天给大家带了一篇十分简单的入门贴，即技术性不太严谨，更多是操作，希望大家喜欢。
  既然是一篇操作贴，其中技术上的解释不作太多描述，希望大家谅解，若想进一步学习相关技术，请拉到文章末尾进一步学习。
  如题，今天的主要内容就是针对 HTTP 有关不同于浏览器交互操作的其他中层操作，我接下来以以下几个方面具体描述。

1. 文章概述
2. 图形界面操作
3. 命令行操作
4. Client&Server
5. 文章总结

1. 文章概述

• 写本次文章的原因

因为当前工作内容和性质 网络爬虫 既然要爬虫则主要需要对网络上的内容进行　HTTP 操作，尤其是只能通过程序去构造、实现相关 HTTP 操作，而不是利用　浏览器，这就是我爬虫需要处理的重点之一。因为网络上资源的不断更新，其操作更需要细心缜密，为了更好地叙述这篇文章，接下来我会对篇文章所需环境、工具和名词简单说明。

• 全局环境工具说明

  操作系统
  当前环境：客户端：Windows 7，服务端：Centos 6.7
  本来计划使用 Ubuntu16，但是想要作图即放弃
  其中文章中会涉及到一台腾讯云服务器 TxyServer

  工具
  使用到的工具有

  1. Firefox 56.0(浏览器)
  2. Postman for Linux-5.3.0(图形化 API 工具)
  3. curl(Linux 下最 awesome 的 HTTP 请求工具)
  4. HTTPie(Python 封装的更加友好的"curl")
  5. nc(Linux 下最 amazing 的网络工具，具有"瑞士军刀"美誉)

同时为本次文章我简单搭建一个 HTTP Server @TxyServer，其中 index URL 路径为 HTTP Index，目的是利用更加纯粹的交互资源来体现 HTTP 的魅力。

2. 图形界面操作

一想到图形界面，最先想到的是浏览器，这里首先利用 Firefox 来做一次 HTTP 请求，如下图，这里使用 Firefox 在地址栏中人工键入 www.baidu.com，然后浏览器界面上就显示了　百度首页，其实这里人与浏览器还有百度服务器完成了一次完整的 HTTP 交互操作，对人来说很简单，只要简单输入和点击就可以实现很多很多次的 HTTP 交互。
  为了更加清晰地一睹其真容，我们打开 开发者工具(Ctrl+Shift+L 即可)，首先能看到的是查看器(Inspector)，翔实说明了当前文档的内容，当然这个 HTML 资源只是多次请求中的一个主要内容，但是为了让用户好看，为了验证用户，为了让 Baidu 后台分析，事实上后面也是加载了非常多请求。

查看器

很好理解，客户端 Firefox 发起 GET 请求 baidu.com 对应主机上的 `/` 文档，服务器接受到 `HTTP` 请求后响应该客户端。

进一步点击网络(Network)，可以非常清楚的看到为了让我们看到百度首页，浏览器与服务器作了多少次请求和响应。

网络

可以看到，除第一行高亮的请求响应过程外，其他请求响应过程的响应状态码都为 `304` 表示其请求的资源已经被缓存到本地，而且已经检查过，服务器这里并没有做更新

虽然 Firefox 可以简单地查看一些 HTTP 交互过程，但是依然对其理解不够深刻，怎么能更加 "手工" 地实现呢？

这里我们就要请到 Postman，他是一款 API 测试工具，或者说偏向与测试人员对其检测的 Web 产品有一个非常简单、利于测试评估、但又不太傻瓜的工具，他就诞生了。类似的国内外产品有很多，他是相关产品的始祖，之前仅仅运行于 Chrome 上，功能没有这么丰富，之后通过 Electron 技术实现了跨平台化，支持团队化、支持同步、能自动生成十分精良的测试评估。但是我们这里更加看中的是他本身的 HTTP 交互功能，这里再次利用他来做一次 HTTP 请求，如下图，这里我们 GET 请求了 www.github.com 来进一步感受，请注意这里存在一个选项按钮，支持当前 HTTP 基本所有的请求方法，但是对于当前互联网 Web 应用来说，比较常用仅仅是 GET/POST Method。

Postman UI

根据我简单的高亮，大家自己去上手这个 `app` 很快就能理解
这里重点就是她右侧的 `请求方法栏` 很厉害，不同于 `浏览器`，他能构造这么多种请求。

3. 命令行操作

在 Linux 世界，一个字“只要你愿意打字，GUI 可以干的时我也可以做”，这里也是本篇文章的部分主要内容，命令行下进行 HTTP 操作，在这里可能会 Client 与 Sever 之间更多的交互。

1. curl

curl 全称 CommandLine Uniform Resource Locator，这里可以看到后面 3 个词语，即 URL 的意思啦，当然学习这个命令也是值得的，这里我简单的描述一些命令即解释。

• 输出 ww.sina.com.cn 对应资源内容到终端/文件

curl www.sina.com.cn
curl www.sina.com.cn -0 sina.html

• 头信息(响应头) 输出

curl -i www.sina.com.cn  # 带上 response headers 连带输出
curl -I www.sina.com.cn  # 仅仅 response headers 输出

• 跳转(status code 3XX)自动处理

curl -L www.sina.com  # 事实上你看的是 [www.sina.com.cn](www.sina.com.cn)

• 详细的 HTTP 请求&响应过程输出

curl -v www.sina.com.cn  # 连带请求头
curl --trace output.txt www.sina.com.cn  # 输出相关通信过程
curl --trace-ascii output.txt www.sina.com.cn  # 二进制输出

• 表单请求

curl www.sina.com/form?data=xx  # curl 默认 GET 请求(很像你在浏览器地址栏输入 URL 然后请求)
# 以上操作请注意：当 URL 包含 & 字符，这一般是 GET 请求多个参数的连接符
# 但是在命令行中会因为转义而无法使用，建议用 "" 将 URL 包裹起来
curl -X GET www.ex.com  # 显式构造 GET 请求
curl -X POST --data "data=xx" www.sina.com/form  # POST 请求 data 为其参数说明
curl -X DELETE www.ex.com  # DELETE 请求：删除 URL 对应资源

• 请求头/cookie相关

curl --user-agent "Mozilla/5.0 (Windows NT 10.0; WOW64; rv:55.0) Gecko/20100101 Firefox/55.0" www.ex.com  # 修改 UA(默认 "curl")
curl --header "Content-Type:application/json" ww.examle.com  # 修改头信息：表明我只要类型为 JSON 的资源
curl --cookie "rzxid=1218" www.1218.com.cn  # 修改 cookie 信息

与 curl 类似的还有 HTTPie，他更加友好，更能让开发者少打字，不过还是打字啊(雾，当然对 curl 了解的朋友肯定会想到神奇的 wget 怎么说，他的功能更加偏向于对网络上资源的下载，支持更多的协议，在命令行设计上的确与 curl 有很大程度上的相似。这篇文章不会过多去描述他们，我会在文章末尾附上更多相关学习资料。

2. nc

nc，这里附上一个博客中对他的描述：

  NetCat是一个非常简单的Unix工具，可以读、写TCP或UDP网络连接(network
connection)。它被设计成一个可靠的后端(back-end) 工具，能被其它的程序
程序或脚本直接地或容易地驱动。同时，它又是一个功能丰富的网络调试和开
发工具，因为它可以建立你可能用到的几乎任何类型的连接，以及一些非常有
意思的内建功能。NetCat，它的实际可运行的名字叫nc，应该早很就被提供，
就象另一个没有公开但是标准的Unix工具。

这里我们主要使用的是他的前一部分功能中的最耗打字的一部分功能，简单来说，我会人工打字，将数据整合并输出给请求端，我们会主动请求，具体内容请看一下 GIF 就明白了。

nc -lk 80

GIF 左边作为 客户端，右边作为 服务端
在这里 nc 命令作为一个可通过TCP或UDP协议传输读写数据的工具
`nc -lk 80` 其中 `l` 参数目的是针对入站连接启用监听模式
`k`参数旨在入站过程中使套接字针对多个连接都能时刻保持
那么当 `Firefox` 键入 172.20.21.207 地址时，它会构造 `HTTP` 请求
请求 172.20.21.207 的 80 端口中的数据/资源
服务端即我收到请求，我手打响应
这里请注意我这里的所输入内容都会影响客户端的内容显示

3. 命令行操作
4. Client&Server
5. 文章总结

在这里我要利用它请求已搭建的 HTTP Server 来进一步理解 HTTP 交互，虽然请求的资源很简单，但是很是说明问题，建议大家去试一试，在这里我尽可能实现了 HTTP 交互过程出现的方法，尤其是这里支持使用 Firefox 或者 Postman 来作客户端作相关请求。

1. Index Page
     这里我利用 postman GET 请求 http://amayou.cn/https 对应资源，因为当前功能会涉及到简单的密码保护，服务端会考虑 session 过程，这里我首先利用 postman POST 请求

Login 后获得响应的结果是 Index Page

可以通过看服务端日志可以进一步说明

请求过程

• [24/Oct/2017 16:56:03] 客户端 GET 请求 /https (Index Page) 资源 (但是你没登录，所以服务端提出 303 跳转响应)
• [24/Oct/2017 16:56:03] 这时你其实 GET 接受到服务端来的 /https/login (Login Page)

这里需要注意：
Postman 无法在页面栏通过点击/键入等操作来实现类似浏览器自动提交数据的功能，即要 `GET` 需收到在地址栏输入地址并 send
要 `POST` 需自己构造 payload data 并 send

• [24/Oct/2017 16:59:02] 所以我们选择直接 POST login Page 来登录

这里请看上图第二行高亮的内容
我 `POST` 的内容是以 key/value 形式的 username 与 passwd，具体请看下图 Login Page 实际 `GET` 表单内容

GET 请求到的 Login Page

• [24/Oct/2017 16:59:02] 登录成功后可以查看 Index Page

2. Login/Logout Page
     这里我主动 GET 请求，响应返回一个简单的表单，但这里不能之间填写，若要成功登陆则需要模拟 POST 请求来处理。

Login Page

3. Get Page
     这里键入 http://amayou.cn/https/get 直接 GET 请求，获取到 Get Page 内容，若欲发起带参数的 GET 请求，如 http://amayou.cn/https/get?type=json 如下图响应。

GET Page

这里 Body 内容是返回 JSON 格式的有关你的请求方法，参数，内容类型。

get?type=json 响应 Body

这里 Headers 由响应多构造出 app-method，app-path，status-code 这 3 个首部。

get?type=json 响应 Headers(高亮处是特殊首部)

这里请求 http://amayou.cn/https/get?type=pdf 如下图会下载这个 假 pdf 文件，为什么这里是假呢？因为请求并没有作 type 限制，则客户端获取到响应 headers 后判断返回的类型是 pdf 则需要下载该文件，事实上服务端这里返回的还是与上述 type=json 一样的内容，这里是为了深刻理解 header 中 content-type 的作用。

get?type=pdf

从高亮处可以看到其中 type 修改为 application/pdf 即为欺骗。

PDF 响应欺骗

4. Post Page
     这里我首先 GET 请求了 http://amayou.cn/https/post 获得如下页面内容。

POST Page

这里存在 3 种 POST 方法，如下面 3 张图片。
4.1. 主动 POST Data
  这里在请求 body 中修改类型为 form-data 并返回 JSON 内容。

POST Data & return JSON

4.2. 被动 POST JSON
  这里通过用户填写表单，不用如 4.1. 一般（要描述好请求 body 了），如下图。

POST JSON & return JSON

4.3. POST Pic
  这里可以提交自己的图片给服务器（有简单地大小格式限制），如下图，我上传一张 niu.png，并返回上传成功结果。

niu.png 未提交前 提交后 服务器中的图片

5. Head Page
     这里的 HEAD 请求与 GET 很像，针对 http://amayou.cn/https/head 若直接通过 GET 该地址，则返回错误，这里服务端没有具体实现， None 的意思就是出错了。

GET HEAD Page

若这里利用 HEAD 请求其地址，则会返回 啥也没有，指 body 里面什么也没有，但是 header 里有，如下图。

HEAD body HEAD headers

5. 文章总结

第一次在简书上写技术文章，可以看得出很入门，从这篇文章标题可以看出其目的，怎么才能不用浏览器就可以访问互联网呢？，为的是给大家简单普及/实现 HTTP 协议下简单 web 应用，其实到头来，哇！浏览器真 TM 是个好东西，好省心~。
  因为是第一次，文章断断续续从想法到实现三周搞出来，肯定有不对的地方和含糊不清的地方，请有问题的各位评论/私信来批评我~

---

参考/学习：

1. 阮一峰网站开发指南
2. curl 官方文档
3. nc 介绍博客
4. HTTP 权威指南
5. RFC 2616
6. HTTPie 官方文档
7. 文章中涉及到的 https 应用

感谢：

@laomao 对我的大力支持帮助，谢谢！

---