• ＜网络＞ HTTP

    目录

    前言：

     一、再谈协议

    （一）认识URL

    （二）Encode 和 Decode

    二、HTTP 协议

    （一）协议格式

    （二）见一见请求

    （三）见一见响应

    三、模拟实现响应

    （一）简单实现

    （二）重要属性

    1.Content-Length

    2.Content-Type

    （三）请求分析

    1. 路径处理

    2. 类型处理

    3. 请求方法

    4. 状态码

    （1）重定向状态码

    5. Cookie 缓存

    6. 补充

    前言：

    在序列化与反序列化文章中，我们了解了 协议 的制定与使用流程，不过太过于简陋了，真正的 协议 会复杂得多，也强大得多，比如在网络中使用最为广泛的 HTTP/HTTPS 超文本传输协议。HTTP（Hypertext Transfer Protocol，超文本传输协议）是一种应用层的协议，用于在网络中传输超文本（如网页）。HTTP是互联网上应用最为广泛的一种网络协议，所有的WWW文件都必须遵守这个标准。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。

     一、再谈协议

    但凡是使用浏览器进行互联网冲浪，那必然离不开这个 协议，HTTP/HTTPS 不仅支持传输文本，还支持传输图片、音频、视频等 资源

    客户端/浏览器上传资源的大小称为 上行流量，获取资源的大小称为 下行流量，网速则是单位时间内所能传输的流量大小，所以网速越快，上传/下载的体验就会越好。

    可以在浏览器中根据 CSDN服务器的 IP 和 Port，以及资源路径，基于 HTTPS 协议，获取我们所需要的资源，例如：

    https://blog.csdn.net/weixin_61522065?type=blog 表示我的个人主页。

    （一）认识URL

    诸如上面的网址称为 URL -> Uniform Resource Locator 统一资源定位符，也就我们熟知的 超链接/链接，URL 中包含了 协议、IP地址、端口号、资源路径、参数 等信息：

    注：登录信息现在已经不使用了，因为不够安全

    IP地址在哪呢？

    • blog.csdn.net 叫做 域名，可以通过 域名 解析为对应的IP地址。
    • 使用 域名 解析工具解析后，下面就是  服务器的IP地址:

    那端口号呢？

    • 为了给用户提供良好的体验，一个成熟的服务是不会随意改变端口号的
    • 只要是使用了 HTTP 协议，默认使用的都是 80 端口号，而 HTTPS 则是 443
    • 如果我们没指明端口号，浏览器就会使用 协议 的默认端口号

    现在大多数网站使用的都是 HTTPS 协议，更加安全，默认端口为 443

    至于资源路径，这是 Linux 中的文件路径，比如下面这个 URL

    https://blog.csdn.net/csdnnews/article/details/137972430?spm=1000.2115.3001.5926

    其资源路径为 /article/details/137972430，与 Linux 中的路径规则一致，这里的路径起源于 web 根目录（不一定是 Linux 中的根目录）：

    在 Linux 机器中存放资源（服务器），客户端访问时只需要知晓目标资源的存储路径，就能访问了，除了上面这些信息外，URL 中还存在特殊的 分隔符:

    • :// 用于分隔 协议 和 IP地址
    • : 用于分隔 IP地址 和 端口号
    • / 表示路径，同时第一个 / 可以分隔 端口号 和 资源路径
    • ? 则是用来分隔 资源路径 和 参数

    这些特殊 分隔符 很重要，这是属于 协议 的一部分，就像我们之前定义的 两正整数运算协议 中的 一样，如果没有 分隔符，那就无法获取 URL 中的信息。

    如果 资源路径 或者后面的 参数 中不小心携带了 某些分隔符 会怎么样？

    • 最好不要出现，即使出现，服务器在传输之前也会将其进行特殊化处理，比如将 （空格）解释为 %20。

    至于 参数 是一组 KV 结构，浏览器可以从 参数 中获取到重要数据。

    （二）Encode 和 Decode

    Encode就是将诸如 分隔符、中文、其他非英语语言 等转换成计算机能认识的符号，比如在浏览器搜索框中输入 //?:: 请求相关资源，实际 URL 中的 参数 为 %2F%2F%3F%3A%3A

    •  转码规则：将需要转码的字符转为16进制，然后从右到左，取4位(不足4位直接处理)，每2位做一位，前面加上%，编码成%XY格式

    即便输入的是 中文，也能进行转码

    decode 通常指的是将某种编码格式的数据转换（解码）为另一种格式，尤其是将编码后的二进制数据或特定格式的文本转换为人类可读的形式：

     所以为什么有的 URL 很长？就是因为在转换后字符数会增多。

    转码这个工作也需要 服务器 完成，基于之前的 ServiceIO() 函数，相对完整的请求处理流程如下

    1. void ServiceIO(const int& sock, const std::string ip, const uint16_t& port)
    2. {
    3.     while(true)
    4.     {
    5.         // 1.读取数据
    6.  
    7.         // 2.移除报头
    8.  
    9.         // 3.反序列化
    10.  
    11. 		// 4.Decode 解码
    12.  
    13.         // 5.业务处理
    14.  
    15. 		// 6.Encode 编码
    16.  
    17.         // 7.序列化
    18.  
    19.         // 8.添加报头
    20.  
    21.         // 9.发送数据
    22.     }
    23. }

    二、HTTP 协议

    （一）协议格式

    HTTP 协议由 Request 请求 和 Response 响应 两部分组成

    从宏观角度来看，HTTP 请求 分为这几部分：

    • 请求行：包括请求方法（GET / POST）、URL、协议版本（http/1.0 http/1.1 http/2.0）
    • 请求报头：表示请求的详细细节，由多组 k: v 结构所组成
    • 空行：区分报头和有效载荷
    • 有效载荷（可以没有）

    在 HTTP 协议中是使用 \r\n 作为 分隔符 的

    如何分离 协议报头 与 有效载荷 ？

    • 以空行 \r\n 进行分隔，空行之前为协议报头，空行之后为有效载荷。

    如何进行 序列化与反序列？

    • 序列化：使用 \r\n 进行拼接
    • 反序列化：根据 \r\n 进行读取

    至于 HTTP 响应 分为这几部分：

    • 状态行：协议版本、状态码、状态码描述
    • 响应报头：表示响应的详细细节，由多组 k: v 结构所组成
    • 空行：区分报头和有效载荷
    • 有效载荷，即客户端请求的资源

    HTTP 响应 中关于 协议报头与有效载荷的分离、序列化与反序列化 等问题和 HTTP 请求 中的处理方式一致。

    如何理解协议版本？

    • 客户端和服务器可能使用了不同的 HTTP 版本
    • 服务器可以根据协议版本的匹配情况进行功能响应

    什么是状态码？

    • 状态码类似于 C/C++ 中的错误码，可以反应请求的情况
    • 常见的状态码：404，状态码的描述为 No Found

    （二）见一见请求

    将浏览器视为客户端，编写服务器，浏览器通过 IP+Port 访问服务器时，就会发出 HTTP 请求，服务器在接收后可以进行打印，也就可以看到 HTTP 请求了

    首先完成 HTTP 服务器的编写

    所需文件：

    • Err.hpp 错误码文件
    • Log.hpp 日志输出
    • Sock.hpp 套接字接口封装
    • HttpServer.hpp 服务器头文件
    • HttpServer.cc 服务器源文件
    • Makefile 自动化编译脚本

     Err.hpp 错误码文件

    1. #pragma once
    2.  
    3. enum
    4. {
    5.     USAGE_ERR = 1,
    6.     SOCKET_ERR,
    7.     BIND_ERR,
    8.     LISTEN_ERR,
    9.     CONNECT_ERR,
    10.     FORK_ERR,
    11.     SETSID_ERR,
    12.     CHDIR_ERR,
    13.     OPEN_ERR,
    14.     READ_ERR
    15. };

    Log.hpp 日志输出

    1. #pragma once
    2.  
    3. #include 
    4. #include 
    5. #include 
    6. #include 
    7. #include 
    8. #include 
    9. #include 
    10. #include 
    11.  
    12. using namespace std;
    13.  
    14. // 日志等级
    15. enum
    16. {
    17.     Debug = 0,
    18.     Info,
    19.     Warning,
    20.     Error,
    21.     Fatal
    22. };
    23.  
    24. static const string file_name = "Log/TCPLogMessage.log"; // 指定存放日志文件目录
    25.  
    26. string getLevel(int level)
    27. {
    28.     vector vs = {"", "", "", 
    29.                          "", "", ""};
    30.     
    31.     // 避免非法情况
    32.     if(level < 0 || level >= vs.size()-1)
    33.         return vs[vs.size()-1];
    34.     return vs[level];
    35. }
    36.  
    37. // 获取当前时间
    38. string getTime()
    39. {
    40.     time_t t = time(nullptr);      // 获取时间戳
    41.     struct tm *st = localtime(&t); // 获取时间相关的结构体
    42.  
    43.     char buff[128];
    44.     snprintf(buff, sizeof(buff), "%d-%d-%d %d:%d:%d", 
    45.              st->tm_year+1900, st->tm_mon+1, st->tm_mday, 
    46.              st->tm_hour, st->tm_min, st->tm_sec);
    47.  
    48.     return buff;             
    49. }
    50.  
    51. void logMessage(int level, const char *format, ...)
    52. {
    53.     // 日志格式：<日志等级> [时间] [PID] {消息体}
    54.     string logmsg = getLevel(level);            // 获取日志等级
    55.     logmsg += " " + getTime();                  // 获取时间
    56.     logmsg += " [" + to_string(getpid()) + "]"; // 获取进程PID
    57.  
    58.     // 截获主体消息
    59.     char msgbuff[1024];
    60.     va_list p;
    61.     va_start(p, format); // 将p定位至format的起始位置
    62.     vsnprintf(msgbuff, sizeof(msgbuff), format, p); // 自动根据格式进行读取
    63.     va_end(p);
    64.  
    65.     logmsg += " {" + string(msgbuff) + "}";        // 获取主体消息
    66.  
    67.     printf("%s\n", logmsg.c_str());
    68.  
    69.     // 写入文件中
    70.     // FILE *fp = fopen(file_name.c_str(), "a"); // 以追加的方式写入
    71.     // if(fp == nullptr) return; 
    72.  
    73.     // fprintf(fp, "%s\n", logmsg.c_str());
    74.     // fflush(fp); //手动刷新一下
    75.     // fclose(fp);
    76.     // fp = nullptr;
    77. }

    Sock.hpp 套接字接口封装

    1. #pragma once 
    2.  
    3. #include "Log.hpp"
    4. #include "Err.hpp"
    5.  
    6. #include 
    7. #include 
    8. #include 
    9. #include 
    10. #include 
    11. #include 
    12. #include 
    13. #include 
    14. #include 
    15.  
    16. const static int default_sock = -1;
    17. const static int default_backlog = 32;
    18.  
    19. class Sock
    20. {
    21. public:
    22.     Sock()
    23.         : sock_(default_sock)
    24.     {}
    25.  
    26.     // 创建套接字
    27.     void Socket()
    28.     {
    29.         sock_ = socket(AF_INET, SOCK_STREAM, 0);
    30.         if(sock_ < 0)
    31.         {
    32.             logMessage(Fatal, "socket error, code: %d, errstring: %s", errno, strerror(errno));
    33.             exit(SOCKET_ERR);
    34.         }
    35.         logMessage(Debug, "Creater Socket Success");
    36.     }
    37.  
    38.     // 绑定IP地址和端口号
    39.     void Bind(const uint16_t &port)
    40.     {
    41.         struct sockaddr_in local;
    42.         memset(&local, 0, sizeof(local));
    43.  
    44.         local.sin_family = AF_INET;
    45.         local.sin_port = htons(port);
    46.         local.sin_addr.s_addr = INADDR_ANY;
    47.  
    48.         if(bind(sock_, (struct sockaddr*)&local, sizeof(local)) < 0)
    49.         {
    50.             logMessage(Fatal, "bind error, code: %d, errstring: %s", errno, strerror(errno));
    51.             exit(BIND_ERR);
    52.         }
    53.     }
    54.  
    55.     // 监听
    56.     void Listen()
    57.     {
    58.         if(listen(sock_, default_backlog) < 0)
    59.         {
    60.             logMessage(Fatal, "listen error, code: %d, errstring: %s", errno, strerror(errno));
    61.             exit(LISTEN_ERR);
    62.         }
    63.     }
    64.  
    65.     // 处理连接请求
    66.     int Accept(std::string *clientip, uint16_t *clientport)
    67.     {   
    68.         struct sockaddr_in client;
    69.         socklen_t len = sizeof(client);
    70.  
    71.         int sock = accept(sock_, (struct sockaddr*)&client, &len);
    72.  
    73.         if(sock < 0)
    74.         {
    75.             logMessage(Warning, "accept error, code: %d, errstring: %s", errno, strerror(errno));
    76.         }
    77.         else
    78.         {
    79.             *clientip = inet_ntoa(client.sin_addr);
    80.             *clientport = ntohs(client.sin_port);
    81.             logMessage(Debug, "accept success, [acceptSock: %d, clientip: %s , clientport: %d]", sock, clientip->c_str(), *clientport);
    82.         }
    83.         return sock;
    84.     }
    85.  
    86.     // 连接
    87.     int Connect(const std::string &serverip, const uint16_t &serverport)
    88.     {
    89.         struct sockaddr_in server;
    90.         memset(&server, 0, sizeof(server));
    91.  
    92.         server.sin_family = AF_INET;
    93.         server.sin_port = htons(serverport);
    94.         server.sin_addr.s_addr = inet_addr(serverip.c_str());
    95.  
    96.         return connect(sock_, (struct sockaddr*)&server, sizeof(server));
    97.     }
    98.  
    99.     // 获取sock
    100.     int GetSock()
    101.     {
    102.         return sock_;
    103.     }
    104.  
    105.     // 关闭sock
    106.     void Close()
    107.     {
    108.         if(sock_ != default_sock) close(sock_);
    109.         logMessage(Debug, "close sock success");
    110.     }
    111.  
    112.     ~Sock()
    113.     {}
    114. private:
    115.     int sock_; // 既可以是监听套接字，也可以是连接成功后返回的套接字
    116. };

     在实现 HTTP 服务器时，我们可以假设服务器一次就将 请求 全部读完了

    HttpServer.hpp 服务器头文件

    1. #pragma once
    2.  
    3. #include "Sock.hpp"
    4.  
    5. #include 
    6. #include 
    7. #include 
    8. #include 
    9.  
    10. class HttpServer;
    11.  
    12. class ThreadData
    13. {
    14. public:
    15.     ThreadData(int sock, const uint16_t port, const string &ip, HttpServer *httpsvr)
    16.         :sock_(sock), port_(port), ip_(ip), httpsvr_(httpsvr)
    17.     {}
    18.     
    19.     ~ThreadData()
    20.     {
    21.         close(sock_);
    22.     }
    23. public:
    24.     int sock_;
    25.     uint16_t port_;
    26.     string ip_;
    27.     HttpServer *httpsvr_;
    28. };
    29.  
    30. class HttpServer
    31. {
    32.     const static uint16_t default_port = 8080;
    33.     using func_t = function<string(const string &)>;
    34. public: 
    35.     HttpServer(func_t func, uint16_t port = default_port)
    36.         : func_(func), port_(port)
    37.     {}
    38.  
    39.     void Init()
    40.     {
    41.         listensock_.Socket();
    42.         listensock_.Bind(port_);
    43.         listensock_.Listen();
    44.         logMessage(Debug, "Init server success");
    45.     }
    46.  
    47.     void Start()
    48.     {
    49.         while(true)
    50.         {
    51.             uint16_t clientport;
    52.             string clientip;
    53.             int clientsock = listensock_.Accept(&clientip, &clientport);
    54.  
    55.             // 接受客户端请求失败，重新连接
    56.             if(clientport < 0) continue;
    57.  
    58.             ThreadData *td = new ThreadData(clientsock, clientport, clientip, this);
    59.             pthread_t tid;
    60.             pthread_create(&tid, nullptr, threadRoutine, td);
    61.         }
    62.     }
    63.  
    64.     static void *threadRoutine(void *args)
    65.     {
    66.         pthread_detach(pthread_self());
    67.  
    68.         ThreadData *td = static_cast(args);
    69.  
    70.         // 假设一次都读完了
    71.         char buff[4096];
    72.         ssize_t test = -1;
    73.         ssize_t s = recv(td->sock_, buff, sizeof(buff)-1, 0);
    74.         if(s > 0)
    75.         {
    76.             buff[s] = 0;
    77.             string response = td->httpsvr_->func_(buff);
    78.             send(td->sock_, response.c_str(), response.size(), 0);
    79.         }
    80.         else
    81.         {
    82.             logMessage(Debug, "Cilent [%d -> %s:%d] Quit", td->sock_, td->ip_.c_str(), td->port_);
    83.         }
    84.  
    85.         delete td;
    86.         return nullptr;
    87.     }
    88.  
    89.     ~HttpServer()
    90.     {
    91.         listensock_.Close();
    92.     }
    93. private:
    94.     uint16_t port_;
    95.     Sock listensock_;
    96.     func_t func_;
    97. };

     HttpServer.cc 服务器源文件

    1. #include 
    2.  
    3. #include "HttpServer.hpp"
    4.  
    5. string HttpHandler(const string &request)
    6. {
    7.     // 打印请求
    8.     cout << request << endl;
    9.     return "";
    10. }
    11.  
    12. int main()
    13. {
    14.     unique_ptr psvr(new HttpServer(HttpHandler));
    15.  
    16.     psvr->Init();
    17.     psvr->Start();
    18. }

     Makefile 自动化编译脚本

    1. HttpServer:HttpServer.cc
    2. 	g++ -o $@ $^ -std=c++11 -lpthread
    3.  
    4. .PHONY:clean
    5. clean:
    6. 	rm -rf HttpServer

     编译并启动服务器

    现在服务器已经准备好了，浏览器输入 IP:Port 发出 HTTP 请求，因为当前服务器并未进行任何响应，所以浏览器无法显示页面：

    这就是 HTTP 请求 

    其中包含了 请求行、请求报头、空行

    从请求行中可以看到当前使用的是 GET 请求，基于 HTTP/1.1 版本，且请求的资源路径为 /，如果我们在浏览器中指定资源路径，那么服务器则会得到该路径

    在请求报头中包含多组属性：

    • Host 表示当前请求的服务器 IP+Port
    • Connection 表示当前连接模式为长连接还是短连接
    • Cache-Control 表示双方在通信时缓存的最大生存时间
    • Upgrade-Insecure-Requests 表示是否将 HTTP 连接方式升级为 HTTPS 连接
    • User-Agent 表示用户端（也就是浏览器）的信息
    • Accept 表示客户端（浏览器）能接受的响应类型
    • Accept-Encoding 表示客户端（浏览器）能接受的 Encoding 类型
    • Accept-Language 表示客户端（浏览器）能接受的编码符号

    User-Agent 很有意思，它能让服务器根据不同的设备，提供不同的 标签，比如下载微信客户端，使用 Windows 电脑访问，默认显示的下载方式为 电脑下载，但如果使用 iPhone 访问，下载方式则会变为 App Store

    （三）见一见响应

    可以通过 telnet 这个工具（没有的话自行下载）获取服务器的响应，比如获取 百度 服务器的响应：

    telnet www.baidu.com 80

    输入 ^] 连接服务器（ctrl + ]）

    ^]

    此时就表示已经和 百度 的服务器建立了连接

    接着发出一个最简单的请求，看看 百度 服务器的响应结果

    注意： 需要先按回车后，再发出请求，请求发出后需要再次回车表示空行，同时回车发送。

    GET / HTTP/1.0

    下面这个就是 百度 服务器对于请求资源路径为 / 时的响应结果，也就是前端页面信息，它的响应结果也得遵循 HTTP 协议的响应格式：

    状态行中包括了 HTTP 版本、状态码、状态描述，响应报头中是各种 属性，重要字段后面再谈，有效载荷中则是请求的 资源。 

    将响应结果中的有效载荷部分作为前端页面代码，就可以得到百度 的默认页面：

    三、模拟实现响应

    了解了 HTTP 响应的格式后，可以根据该格式实现一个简单的响应，发送给客户端（浏览器）

    （一）简单实现

    在之前实现的 HTTP 服务器中，只需要对 HttpHandler() 方法中的返回值进行修改即可

    1. 添加状态行
    2. 添加响应报头（可省略）
    3. 添加空行
    4. 添加有效载荷
    1. const static string SEP = "\r\n";
    2.  
    3. string HttpHandler(const string& request)
    4. {
    5.     // 打印请求
    6.     cout << request << endl;
    7.  
    8.     string response = "HTTP/1.0 200 OK" + SEP; // 状态行
    9.     response += SEP; // 空行
    10.     response += "Hello HTTP!"; // 有效载荷
    11.     return response;
    12. }

    编译并启动服务器，浏览器发出请求，就能得到服务器的简单响应： 

    如果将 有效载荷 部分替换成前端代码，就可以得到一个更为美观的响应页面（浏览器识别 有效载荷 为 HTTP 代码，自动解释为网页）

    关于前端页面的学习：HTML

    1. string HttpHandler(const string& request)
    2. {
    3.     // 打印请求
    4.     cout << request << endl;
    5.  
    6.     string response = "HTTP/1.0 200 OK" + SEP; // 状态行
    7.     response += SEP; // 空行
    8.     response += "  
       TEST 
       
       Hello HTTP! 
        "      ; // 有效载荷
    9.     return response;
    10. }

    使用 telnet 获取我们的服务器响应

    除了 telnet 外，还可以使用 Postman （可以在网上寻找安装包）等工具在 Windows 中获取服务器响应：

    （二）重要属性

    客户端/服务器在解析响应/请求时，必须要知道 有效载荷 的长度，避免多个响应/请求粘在一起而导致无法解析。

    1.Content-Length

    在 HTTP 中通过 Content-Length: xxx 来表示 有效载荷 的长度为 xxx，但是在我们上面模拟实现的响应中，并没有添加 Content-Length 属性，浏览器又是如何知道 有效载荷 的长度呢？

    这是因为 现代浏览器的功能都十分强大，即使你不指明 Content-Length 它也能通过 边读取边解释 等策略读取 有效载荷，但从 协议 角度来看，无论浏览器是否使用，我们都应该注明 Content-Length 属性。

    浏览器的编写难度稍稍逊于比操作系统，是一款十分智能、强大的工业级软件。

    比如我们给百度服务器发送请求时，它所响应的内容中就包含了 Content-Length 属性：

    给 HTTP 服务器的响应中加上该属性

    1. string HttpHandler(const string& request)
    2. {
    3.     // 打印请求
    4.     cout << request << endl;
    5.  
    6.     string body = "  
       TEST 
       
       Hello HTTP! 
        "      ;
    7.  
    8.     // 状态行
    9.     string response = "HTTP/1.0 200 OK" + SEP; 
    10.     
    11.     // 响应报头
    12.     response += "Content-Length: " + to_string(body.size()) + SEP; // 有效载荷的长度
    13.     
    14.     // 空行
    15.     response += SEP; 
    16.     
    17.     // 有效载荷
    18.     response += "  
       TEST 
       
       Hello HTTP! 
        "      ; // 有效载荷
    19.     return response;
    20. }

    使用 Postman 发起请求，在Header标签可以看到 Content-Length 属性值为 66，表示 有效载荷 长度为 66 

    注意： 当主动添加 Content-Length 属性后，部分浏览器可能不会主动解析有效载荷，转而直接输出有效载荷的内容。

    所以为了让浏览器更好的解析 有效载荷，还需要注明 有效载荷 的类型。

    2.Content-Type

    Content-Type: xxx 表示当前响应的资源类型为 xxx（网页、文本、图片、音频、视频等），可以通过不同的后缀来表征不同的资源，比如 .avi 格式的视频，可以使用 Content-Type: video/avi 来注明，Content-Type 对照表

    如果我们将类型指定为 .txt，浏览器再访问 HTTP 服务器时，就会直接显示 有效载荷，而非解释为网页

    1. string HttpHandler(const string& request)
    2. {
    3.     // 打印请求
    4.     cout << request << endl;
    5.  
    6.     string body = "  
       TEST 
       
       Hello HTTP! 
        "      ;
    7.  
    8.     // 状态行
    9.     string response = "HTTP/1.0 200 OK" + SEP; 
    10.     
    11.     // 响应报头
    12.     response += "Content-Length: " + to_string(body.size()) + SEP; // 有效载荷的长度
    13.     response += "Content-Type: text/plain" + SEP; // 有效载荷类型为 文本
    14.     
    15.     // 空行
    16.     response += SEP; 
    17.     
    18.     // 有效载荷
    19.     response += body;
    20.     return response;
    21. }

    浏览器访问 HTTP 服务器就会得到一个文本，也就是 有效载荷 中的内容：

    通过 Postman 也可以看到 Content-Type: text/plain 这个属性：

    正常情况下，响应的资源是说明类型，Conten-Type 就得注明其类型，确保浏览器能正确解析。

    （三）请求分析

    1. 路径处理

    正常情况下，在访问网页时，用户知道自己要访问的是哪个资源，浏览器会通过该资源在服务器中对应的 资源路径 发出请求，所以说 HTTP 服务器需要具备根据不同的 资源路径，给出不同的响应的能力，这也就意味着我们需要在服务器中创建一个资源目录 webRoot，其中存放各种资源：

    此时我们就不能直接在 HttpServer.cc 中硬编码了（直接写出有效载荷），而是需要根据 资源路径，去 webRoot 目录中查找资源文件并读取，读取文件内容需要用到下面这个工具类 Util.hpp

    注意： 需要按照文件中的大小进行读取，避免因读取到 0 而提前停止（二进制文件中存在 0）

    1. #pragma once
    2.  
    3. #include "Log.hpp"
    4.  
    5. #include 
    6. #include 
    7. #include 
    8. #include 
    9. #include 
    10. #include 
    11.  
    12. class Util
    13. {
    14. public:
    15.     static bool ReadFile(const std::string &path, std::string *outStr)
    16.     {
    17.         // 获取文件信息
    18.         struct stat st;
    19.         if(stat(path.c_str(), &st) < 0) return false;
    20.  
    21.         // 分配空间
    22.         int n = st.st_size;
    23.         outStr->resize(n+1);
    24.  
    25.         // 打开文件
    26.         int fd = open(path.c_str(), O_RDONLY);
    27.         if(fd < 0) return false;
    28.  
    29.         // 读取文件
    30.         int size = read(fd, (char*)outStr->c_str(), n);
    31.  
    32.         close(fd);
    33.  
    34.         logMessage(Info, "read file %s success", outStr->c_str());
    35.  
    36.         // 实际读取到的大小应该与文件的大小一致
    37.         return size == n;
    38.     }
    39. };

    在 index.html 文件中设置一个默认页面

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>testtitle>
    8. head>
    9.  
    10. <body>
    11.     <h1>
    12.         Test
    13.     h1>
    14.  
    15.     <p>
    16.         Good Morning!
    17.         Good Morning!
    18.         Good Morning!
    19.         Good Morning!
    20.         Good Morning!
    21.     p>
    22. body>
    23.  
    24. html>

    HttpHandler() 函数在处理请求时，就可以通过 资源路径 读取资源了

    1. string HttpHandler(const string& request)
    2. {
    3.     // 打印请求
    4.     cout << request << endl;
    5.     string body;
    6.  
    7.     // 读取资源文件
    8.     Util::ReadFile(DefaultSourcePath, &body);
    9.  
    10.     // 状态行
    11.     string response = "HTTP/1.0 200 OK" + SEP; 
    12.     
    13.     // 响应报头
    14.     response += "Content-Length: " + to_string(body.size()) + SEP; // 有效载荷的长度
    15.     response += "Content-Type: text/html" + SEP; // 有效载荷类型为 网页
    16.     
    17.     // 空行
    18.     response += SEP; 
    19.     
    20.     // 有效载荷
    21.     response += body;
    22.     return response;
    23. }

    现在我们需要一个 结构体 来存储请求中的各种信息，比如 资源路径，同时需要借助 反序列化 进行解析。

    注意：

    • 如果用户直接请求 "/" 根目录，不能将目录中的所有资源都响应，而是需要响应一个默认显示页面。
    • URL 中的资源路径，需要加上 web 根目录，才是一个完整的路径。

    Protocol.hpp 请求处理相关头文件：

    1. #pragma once
    2.  
    3. #include "Util.hpp"
    4.  
    5. #include 
    6. #include 
    7.  
    8. const static string SEP = "\r\n";
    9. const static string webRoot = "./webRoot";
    10. const static string DefaultSourcePath = "/index.html"; // 默认为网页类型
    11.  
    12. class Request
    13. {
    14. public:
    15.     Request()
    16.     {}
    17.  
    18.     // 反序列化
    19.     bool Deserialize(const string &url)
    20.     {
    21.         // 根据 url 进行解析
    22.         int n = 0;
    23.         vector vstr;
    24.         while(true)
    25.         {
    26.             string line;
    27.             n = Util::ReadLine(url, n, SEP, &line) + SEP.size();
    28.  
    29.             if(line.empty()) break;
    30.  
    31.             vstr.push_back(line);
    32.         }
    33.  
    34.         // 解析请求行
    35.         ParseFirstLine(vstr[0]);
    36.  
    37.         // 解析报头行
    38.         ParseHeaderLine(vstr);
    39.  
    40.         // 读取并解析有效载荷(可能没有)
    41.         Util::ReadLine(url, n, SEP, &_body);
    42.  
    43.         return true;
    44.     }
    45.  
    46.     // 解析请求行
    47.     bool ParseFirstLine(const string &str)
    48.     {
    49.         // 读取方法、资源路径、协议版本
    50.         stringstream ss(str);
    51.         ss >> _method >> _path >> _version;
    52.  
    53.         // 解析出后缀
    54.         if(_path == "/") _path = DefaultSourcePath;
    55.  
    56.         // 实际路径 = web根目录 + 请求资源路径
    57.         int pos = _path.find_last_not_of(".");
    58.         if(pos == string::npos) _suffix = ".html";
    59.         else _suffix = _path.substr(pos);
    60.  
    61.         _path = webRoot + _path;
    62.         return true;
    63.     }
    64.  
    65.     // 解析报头行
    66.     bool ParseHeaderLine(const vector& vstr)
    67.     {
    68.         for(int i = 1; i < vstr.size(); i++)
    69.         {
    70.             const string &str = vstr[i];
    71.  
    72.             int pos = str.find(':');
    73.             string key = str.substr(0, pos);
    74.             string value = str.substr(pos+2);
    75.  
    76.             _headers[key] = value;
    77.         }    
    78.         return true;
    79.     }
    80.  
    81.     ~Request()
    82.     {}
    83. public:
    84.   string _method;  // 请求方法
    85.   string _path;    // 资源路径
    86.   string _suffix;  // 资源后缀
    87.   string _version; // 协议版本
    88.   unordered_map _headers; // 请求报头
    89.   string _body;    // 有效载荷
    90. };

    ReadLine() 读取行函数 — 位于 Util.hpp 工具类头文件的 Request 请求类中

    1. static int ReadLine(const std::string &url, int i, 
    2.                     const std::string &SEP, std::string *line)
    3. {
    4.     int pos = url.find(SEP, i);
    5.     *line = url.substr(i, pos-i);
    6.     return pos;
    7. }

    此时 HttpHandler() 函数中的处理方式就要发生改变了 

    1. string HttpHandler(const string &url)
    2. {
    3.     // 解析请求
    4.     Request req;
    5.     req.Deserialize(url);
    6.  
    7.     // 读取资源文件
    8.     string body;
    9.     Util::ReadFile(req._path, &body);
    10.     cout << "path: " << req._path << endl;
    11.  
    12.     // 状态行
    13.     string response = "HTTP/1.0 200 OK" + SEP; 
    14.     
    15.     // 响应报头
    16.     response += "Content-Length: " + to_string(body.size()) + SEP; // 有效载荷的长度
    17.     response += "Content-Type: text/html" + SEP; // 有效载荷类型为 网页
    18.     
    19.     // 空行
    20.     response += SEP; 
    21.     
    22.     // 有效载荷
    23.     response += body;
    24.     return response;
    25. }

    经过以上修改后，我们的 HTTP 服务器就支持根据不同的 资源路径，响应不同的资源了，现在在 webRoot 这个网页根目录中再添加两个测试文件：file1.html、file2.html 

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>test file1title>
    7. head>
    8. <body>
    9.     <h1>
    10.         FILE1
    11.     h1>
    12.     <p>
    13.         This is file1
    14.         This is file1
    15.         This is file1
    16.         This is file1
    17.         This is file1
    18.     p>
    19. body>
    20. html>
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>test file2title>
    7. head>
    8. <body>
    9.     <h1>
    10.         FILE2
    11.     h1>
    12.     <p>
    13.         This is file2
    14.         This is file2
    15.         This is file2
    16.         This is file2
    17.         This is file2
    18.     p>
    19. body>
    20. html>

    编译并启动服务器，通过浏览器发出不同的请求：

    现在已经具备一个服务器的雏形了，接下来就是处理请求不同资源的问题。

    2. 类型处理

    在进行响应时，需要知晓请求的资源类型，并在响应报头中通过 Content-Type 注明，关于资源路径中的文件后缀提取，已经在 Request 类中完成了，现在只需要根据 Content-Type 对照表进行转换，并赋值至 Response 类中即可：Content-Type 对照表

    构建 Response 响应类，位于 Protocol.hpp，成员有：状态行（协议版本、状态码、状态码信息）、响应报头、有效载荷，函数有：根据请求加载响应对象、反序列化

    1. const static string errPage_404 = "/err404.html";
    2.  
    3. class Response
    4. {
    5. public:
    6.     Response()
    7.     {}
    8.  
    9.     // 序列化
    10.     bool Serialize(string *outStr)
    11.     {
    12.         outStr->clear();
    13.  
    14.         *outStr = _version + " " + _st_code + " " + _st_msg + SEP;
    15.  
    16.         for (auto &kv : _headers)
    17.             *outStr += kv.first + kv.second + SEP;
    18.         *outStr += SEP;
    19.         *outStr += _body;
    20.  
    21.         return true;
    22.     }
    23.  
    24.     // 根据请求对象，构建出响应对象
    25.     bool LoadInfo(const Request &req)
    26.     {
    27.         _version = req._version;
    28.  
    29.         // 读出资源
    30.         string path = req._path;
    31.         if (Util::ReadFile(path, &_body) == false)
    32.         {
    33.             _st_code = "404";
    34.             _st_msg = "No Found";
    35.             path = webRoot + errPage_404;
    36.             Util::ReadFile(path, &_body);
    37.         }
    38.         else
    39.         {
    40.             _st_code = "200";
    41.             _st_msg = "OK";
    42.         }
    43.         cout << "path: " << path << endl;
    44.  
    45.         // 设置报头
    46.         _headers["Content-Length: "] = to_string(_body.size());
    47.         _headers["Content-Type: "] = Util::GetSuffix(req._suffix);
    48.  
    49.         return true;
    50.     }
    51.     
    52.     ~Response()
    53.     {}
    54. public:
    55.     string _version;                        // 协议版本
    56.     string _st_code;                        // 状态码
    57.     string _st_msg;                         // 状态码信息
    58.     unordered_map _headers; // 请求报头
    59.     string _body;                           // 有效载荷
    60. };

    新增根据后缀获取资源类型的工具函数GetSuffix()，位于 Util.hpp

    1. static string GetSuffix(const string &suffix)
    2. {
    3.     // 构建类型映射表
    4.     unordered_map table = 
    5.     {
    6.         {".txt", "text/plain"},
    7.         {".htm", "text/html"},
    8.         {".html", "text/html"},
    9.         {".jpg", "image/jpeg"},
    10.         {".jpeg", "image/jpeg"},
    11.         {".png", "image/png"},
    12.         {".mp3", "audio/mp3"},
    13.         {".avi", "video/avi"},
    14.         {".mp4", "video/mpeg4"},
    15.     };
    16.     if(table.count(suffix) == 0) return "text/html";
    17.  
    18.     return table[suffix];
    19. }

    HttpHandler() 函数中不再需要主动处理请求，而是交给 Response 对象完成

    1. string HttpHandler(const string &url)
    2. {
    3.     // 解析请求
    4.     Request req;
    5.     req.Deserialize(url);
    6.  
    7.     // 构建响应
    8.     Response res;
    9.     res.LoadInfo(req);
    10.  
    11.     // 响应
    12.     string ret;
    13.     res.Serialize(&ret);
    14.  
    15.     return ret;
    16. }

    因为用户可能请求不存在的资源，所以需要准备一个 404 网页

    404 网页代码来源：HTML 和 JavaScript 编写简单的 404 界面

    err404.html 请求资源错误时返回的页面

    1. html>
    2. <html>
    3. <head>
    4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    5.     <title>404title>
    6.  
    7.     <style>
    8.         html, body {
    9.             height: 100%;
    10.             min-height: 450px;
    11.             font-size: 32px;
    12.             font-weight: 500;
    13.             color: #5d7399;
    14.             margin: 0;
    15.             padding: 0;
    16.             border: 0;
    17.         }
    18.  
    19.         .content {
    20.             height: 100%;
    21.             position: relative;
    22.             z-index: 1;
    23.             background-color: #d2e1ec;
    24.             background-image: -webkit-linear-gradient(top, #bbcfe1 0%, #e8f2f6 80%);
    25.             background-image: linear-gradient(to bottom, #bbcfe1 0%, #e8f2f6 80%);
    26.             overflow: hidden;
    27.         }
    28.  
    29.         .snow {
    30.             position: absolute;
    31.             top: 0;
    32.             left: 0;
    33.             pointer-events: none;
    34.             z-index: 20;
    35.         }
    36.  
    37.         .main-text {
    38.             padding: 20vh 20px 0 20px;
    39.             text-align: center;
    40.             line-height: 2em;
    41.             font-size: 5vh;
    42.         }
    43.  
    44.         .main-text h1 {
    45.             font-size: 45px;
    46.             line-height: 48px;
    47.             margin: 0;
    48.             padding: 0;
    49.         }
    50.  
    51.         .main-text-a {
    52.             height: 32px;
    53.             margin-left: auto;
    54.             margin-right: auto;
    55.             text-align: center;
    56.         }
    57.  
    58.         .main-text-a a {
    59.             font-size: 16px;
    60.             text-decoration: none;
    61.             color: #0066CC;
    62.         }
    63.  
    64.         .main-text-a a:hover {
    65.             color: #000;
    66.         }
    67.  
    68.         .home-link {
    69.             font-size: 0.6em;
    70.             font-weight: 400;
    71.             color: inherit;
    72.             text-decoration: none;
    73.             opacity: 0.6;
    74.             border-bottom: 1px dashed rgba(93, 115, 153, 0.5);
    75.         }
    76.  
    77.         .home-link:hover {
    78.             opacity: 1;
    79.         }
    80.  
    81.         .ground {
    82.             height: 160px;
    83.             width: 100%;
    84.             position: absolute;
    85.             bottom: 0;
    86.             left: 0;
    87.             background: #f6f9fa;
    88.             box-shadow: 0 0 10px 10px #f6f9fa;
    89.         }
    90.  
    91.         .ground:before, .ground:after {
    92.             content: '';
    93.             display: block;
    94.             width: 250px;
    95.             height: 250px;
    96.             position: absolute;
    97.             top: -62.5px;
    98.             z-index: -1;
    99.             background: transparent;
    100.             -webkit-transform: scaleX(0.2) rotate(45deg);
    101.             transform: scaleX(0.2) rotate(45deg);
    102.         }
    103.  
    104.         .ground:after {
    105.             left: 50%;
    106.             margin-left: -166.66667px;
    107.             box-shadow: -340px 260px 15px #8193b2, -620px 580px 15px #8193b2, -900px 900px 15px #b0bccf, -1155px 1245px 15px #b4bed1, -1515px 1485px 15px #8193b2, -1755px 1845px 15px #8a9bb8, -2050px 2150px 15px #91a1bc, -2425px 2375px 15px #bac4d5, -2695px 2705px 15px #a1aec6, -3020px 2980px 15px #8193b2, -3315px 3285px 15px #94a3be, -3555px 3645px 15px #9aa9c2, -3910px 3890px 15px #b0bccf, -4180px 4220px 15px #bac4d5, -4535px 4465px 15px #a7b4c9, -4840px 4760px 15px #94a3be;
    108.         }
    109.  
    110.         .ground:before {
    111.             right: 50%;
    112.             margin-right: -166.66667px;
    113.             box-shadow: 325px -275px 15px #b4bed1, 620px -580px 15px #adb9cd, 925px -875px 15px #a1aec6, 1220px -1180px 15px #b7c1d3, 1545px -1455px 15px #7e90b0, 1795px -1805px 15px #b0bccf, 2080px -2120px 15px #b7c1d3, 2395px -2405px 15px #8e9eba, 2730px -2670px 15px #b7c1d3, 2995px -3005px 15px #9dabc4, 3285px -3315px 15px #a1aec6, 3620px -3580px 15px #8193b2, 3880px -3920px 15px #aab6cb, 4225px -4175px 15px #9dabc4, 4510px -4490px 15px #8e9eba, 4785px -4815px 15px #a7b4c9;
    114.         }
    115.  
    116.         .mound {
    117.             margin-top: -80px;
    118.             font-weight: 800;
    119.             font-size: 180px;
    120.             text-align: center;
    121.             color: #dd4040;
    122.             pointer-events: none;
    123.         }
    124.  
    125.         .mound:before {
    126.             content: '';
    127.             display: block;
    128.             width: 600px;
    129.             height: 200px;
    130.             position: absolute;
    131.             left: 50%;
    132.             margin-left: -300px;
    133.             top: 50px;
    134.             z-index: 1;
    135.             border-radius: 100%;
    136.             background-color: #e8f2f6;
    137.             background-image: -webkit-linear-gradient(top, #dee8f1, #f6f9fa 60px);
    138.             background-image: linear-gradient(to bottom, #dee8f1, #f6f9fa 60px);
    139.         }
    140.  
    141.         .mound:after {
    142.             content: '';
    143.             display: block;
    144.             width: 28px;
    145.             height: 6px;
    146.             position: absolute;
    147.             left: 50%;
    148.             margin-left: -150px;
    149.             top: 68px;
    150.             z-index: 2;
    151.             background: #dd4040;
    152.             border-radius: 100%;
    153.             -webkit-transform: rotate(-15deg);
    154.             transform: rotate(-15deg);
    155.             box-shadow: -56px 12px 0 1px #dd4040, -126px 6px 0 2px #dd4040, -196px 24px 0 3px #dd4040;
    156.         }
    157.  
    158.         .mound_text {
    159.             -webkit-transform: rotate(6deg);
    160.             transform: rotate(6deg);
    161.         }
    162.  
    163.         .mound_spade {
    164.             display: block;
    165.             width: 35px;
    166.             height: 30px;
    167.             position: absolute;
    168.             right: 50%;
    169.             top: 42%;
    170.             margin-right: -250px;
    171.             z-index: 0;
    172.             -webkit-transform: rotate(35deg);
    173.             transform: rotate(35deg);
    174.             background: #dd4040;
    175.         }
    176.  
    177.         .mound_spade:before, .mound_spade:after {
    178.             content: '';
    179.             display: block;
    180.             position: absolute;
    181.         }
    182.  
    183.         .mound_spade:before {
    184.             width: 40%;
    185.             height: 30px;
    186.             bottom: 98%;
    187.             left: 50%;
    188.             margin-left: -20%;
    189.             background: #dd4040;
    190.         }
    191.  
    192.         .mound_spade:after {
    193.             width: 100%;
    194.             height: 30px;
    195.             top: -55px;
    196.             left: 0%;
    197.             box-sizing: border-box;
    198.             border: 10px solid #dd4040;
    199.             border-radius: 4px 4px 20px 20px;
    200.         }
    201.     style>
    202.  
    203. head>
    204.  
    205. <body translate="no">
    206. <div class="content">
    207.     <canvas class="snow" id="snow" width="1349" height="400">canvas>
    208.     <div class="main-text">
    209.         <h1>404 天呐！出错了 ~<br><br>您好像去了一个不存在的地方！ (灬ꈍ ꈍ灬)h1>
    210.         <div class="main-text-a"><a href="#">< 返回 首页a>div>
    211.     div>
    212.     <div class="ground">
    213.         <div class="mound">
    214.             <div class="mound_text">404div>
    215.             <div class="mound_spade">div>
    216.         div>
    217.     div>
    218. div>
    219.  
    220.  
    221. <script>
    222.     (function () {
    223.         function ready(fn) {
    224.             if (document.readyState != 'loading') {
    225.                 fn();
    226.             } else {
    227.                 document.addEventListener('DOMContentLoaded', fn);
    228.             }
    229.         }
    230.  
    231.         function makeSnow(el) {
    232.             var ctx = el.getContext('2d');
    233.             var width = 0;
    234.             var height = 0;
    235.             var particles = [];
    236.  
    237.             var Particle = function () {
    238.                 this.x = this.y = this.dx = this.dy = 0;
    239.                 this.reset();
    240.             }
    241.  
    242.             Particle.prototype.reset = function () {
    243.                 this.y = Math.random() * height;
    244.                 this.x = Math.random() * width;
    245.                 this.dx = (Math.random() * 1) - 0.5;
    246.                 this.dy = (Math.random() * 0.5) + 0.5;
    247.             }
    248.  
    249.             function createParticles(count) {
    250.                 if (count != particles.length) {
    251.                     particles = [];
    252.                     for (var i = 0; i < count; i++) {
    253.                         particles.push(new Particle());
    254.                     }
    255.                 }
    256.             }
    257.  
    258.             function onResize() {
    259.                 width = window.innerWidth;
    260.                 height = window.innerHeight;
    261.                 el.width = width;
    262.                 el.height = height;
    263.  
    264.                 createParticles((width * height) / 10000);
    265.             }
    266.  
    267.             function updateParticles() {
    268.                 ctx.clearRect(0, 0, width, height);
    269.                 ctx.fillStyle = '#f6f9fa';
    270.  
    271.                 particles.forEach(function (particle) {
    272.                     particle.y += particle.dy;
    273.                     particle.x += particle.dx;
    274.  
    275.                     if (particle.y > height) {
    276.                         particle.y = 0;
    277.                     }
    278.  
    279.                     if (particle.x > width) {
    280.                         particle.reset();
    281.                         particle.y = 0;
    282.                     }
    283.  
    284.                     ctx.beginPath();
    285.                     ctx.arc(particle.x, particle.y, 5, 0, Math.PI * 2, false);
    286.                     ctx.fill();
    287.                 });
    288.  
    289.                 window.requestAnimationFrame(updateParticles);
    290.             }
    291.  
    292.             onResize();
    293.             updateParticles();
    294.         }
    295.  
    296.         ready(function () {
    297.             var canvas = document.getElementById('snow');
    298.             makeSnow(canvas);
    299.         });
    300.     })();
    301. script>
    302.  
    303. body>
    304. html>

    当前服务器支持请求不同的资源，所以我们可以在 webRoot 网页根目录下添加图片，并内嵌到其他资源文件中，可以使用 wget 命令，用于远程获取资源：

    将图片资源重命名： 

    注意： 如果一个网页中包含多份资源，每一份资源都需要发起一次 HTTP 请求 。

     file1.html

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>test file1title>
    7. head>
    8. <body>
    9.     <h1>
    10.         ?????????????
    11.     h1>
    12.     <p>
    13.         <img src="/image/???.png" alt="鲤鱼大大的文豪">
    14.     p>
    15. body>
    16. html>

    现在可以请求不同的资源了

    请求不存在的网页

     请求 file1.html 文件

     可以在网页中内嵌其他网页的 URL，配合 HTML 语法，实现网页跳转

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>test file1title>
    7. head>
    8. <body>
    9.     <h1>
    10.         ?????????????
    11.     h1>
    12.     <p>
    13.         <img src="/image/???.png" alt="鲤鱼大大的文豪">
    14.         <a href="http://www.baidu.com">百度一下a>
    15.         <a href="/index.html">回到首页a>
    16.     p>
    17. body>
    18. html>

    分别点击 百度一下 和 回到首页 实现跳转

    3. 请求方法

    浏览器（客户端）与服务器间的交互行为可以分为这两类：

    1. 从服务器中获取资源
    2. 将资源上传至服务器

    这两类行为分别对应着最常用的两个请求方法：GET、POST（GET 也能上传资源），除此之外，还存在其他请求方法，但最常用的就是 GET 和 POST

    我们之前发出的请求使用的都是 GET 请求，如何让浏览器发出 POST 请求呢？

    需要使用 HTML 中的 表单，语法如下：

    1. <form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
    2. ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
    3. .
    4. form elements
    5.  .
    6. form>

    表单 中比较重要的两个属性

    • action 向何处发送表单
    • method 表单请求的方法

    表单 中可以指定 method（使用 GET 或者 POST），在网页中看到的绝大多数输入框，都是通过 表单 实现的：

    在我们的 index.html 默认页面文件中实现一个 表单，并指定请求方法为 GET

    注意： 此时的请求可能会导致服务器崩溃，因为我们没有做请求读取的处理工作，可能出现只读取了一半，从而导致读取错误。

    访问网页，可以看到在提交 表单 后，URL 会发生变化，跳转到404页面：

    可以看出，如果使用 GET 方法提交 表单 的话，请求的资源以及文本框中的内容将会以 明文 的形式添加到 URL 中。

    为什么提交后会出现 404 页面？
    因为请求的 /a/b/c.php 资源不存在，自动跳转到了 404 页面。

    服务器中获取的请求详情如下： 

    如果将 index.html 表单 中的请求方法改为 POST

        <form action="/a/b/c.php" method="post">

    表单提交前后 URL 的变化如下 

     可以看到只有请求的资源路径被添加到了 URL 中，那么文本框中的内容哪去了呢？

    答案是 在有效载荷中

    由此可以看出 GET 和 POST 这两种请求方法最大的区别：提参方式，GET 会将表单中的内容直接添加到 URL 中；POST 则会将表单中的内容添加到有效载荷中。

    这两种方法在传输表单内容时，都是明文传输，但 POST 相对 GET 而言更 私密，并且容量也会更大。

    注意： GET 和 POST 方法都不安全，只是 POST 更私密（存储在有效载荷中，用户不容易获取）。

    GET 和 POST 的应用场景：

    • GET：搜索框，比如百度的搜索框使用的就是 GET 方法，可以在 URL 中找到搜索的关键字。
    • POST：敏感字段，比如账号、密码等个人信息，可以提供一定的私密性。
    • 针对敏感字段，除了 POST 外，还可以使用其他更安全的方法。
    • 如果需要传输的内容过长，也可以使用 POST 方法，因为有效载荷的容量理论上非常大（URL 有长度限制）。

    接下来演示使用 Fiddler 等抓包工具，截获 POST 请求，并从中获取账号和密码

    • 大致原理：挟持浏览器，让浏览器先把请求发给它，然后它帮浏览器请求

    可以看到，即使是POST方法，也能被抓取到私密内容 。所以就目前而言（使用 HTTP 协议），只要是没有经过加密的数据，发送到网络中都是不安全的！需要进行加密，随着信息安全的意识增强，会选择使用更加安全的 HTTPS 协议。

    4. ​​​​​​​状态码

    状态码是服务器向浏览器（客户端）反映请求成功与否的一种方式，状态码可以分为这几类：其中最常见的就是 404 错误码，表示 请求的资源不存在，属于客户端错误。关于 HTTP 服务器的 404 页面编写已经在 「类型处理」 部分完成了，当我们访问不存在的网页时，会得到这样一个页面​​​​​​​

    服务器发出的响应正文如下

    HTTP 中浏览器（客户端）的状态码 形态各异，可能出现状态码与实际状态不相符的情况，主要是原因 不同浏览器（客户端）对协议的支持程度不同。

    （1）重定向状态码

    当浏览器（客户端）访问的目标网站地址发生改变时，服务器返回的HTTP数据流中头信息中的状态码会返回 3xx 重定向错误码，浏览器接收到这些状态码后，会自动向新的URL发起请求，以获取所需的资源。常见的重定向状态码如下：

    • 永久重定向：301、308
    • 临时重定向：302、303、307
    • 其他重定向：304

    最具有代表性的重定向状态码为 301 和 302

    如何理解永久重定向和临时重定向？
    永久重定向表示表示一个网页已经永久性地转移到了另一个地址，用户访问的已不存在的网址会自动转到另一个网址，只有第一次访问需要跳转；而临时重定向表示目标网址暂时性地被转移到了另一个地址​​​​​​​，每次访问都需要跳转。

    注意： 无论是永久还是临时，站在服务器角度，都需要进行重定向，因为总会有新客户端连接，需要为其进行重定向引导。

    关于重定向状态的更多信息可以看看这篇文章 《彻底搞懂 HTTP 3XX 重定向状态码和浏览器重定向》

    如何在代码中实现重定向？
    设置错误码为 3xx，并在响应报头中加上 Location: URL

    对 HTTP 服务器进行修改（临时重定向）

    LoadInfo() 根据请求创建响应对象 — 位于 Protocol.hpp 中的 Response 响应类中

    1. // 根据请求对象，构建出响应对象
    2. bool LoadInfo(const Request &req)
    3. {
    4.     _version = req._version;
    5.  
    6.     // 读出资源
    7.     string path = req._path;
    8.     if (Util::ReadFile(path, &_body) == false)
    9.     {
    10.         _st_code = "404";
    11.         _st_msg = "No Found";
    12.         path = webRoot + errPage_404;
    13.         Util::ReadFile(path, &_body);
    14.     }
    15.     else
    16.     {
    17.         _st_code = "200";
    18.         _st_msg = "OK";
    19.     }
    20.  
    21.     // 重新设置状态行(临时重定向)
    22.     _st_code = "301";
    23.     _st_msg = "Moved Permanently";
    24.  
    25.     // 设置报头
    26.     _headers["Content-Length: "] = to_string(_body.size());
    27.     _headers["Content-Type: "] = Util::GetSuffix(req._suffix);
    28.     _headers["Location: "] = "http://www.baidu.com";
    29.  
    30.     return true;
    31. }

    编译并启动服务器，通过浏览器发出请求，请求发出后，直接跳转到了百度首页，再发出请求：

    通过 telnet 获取服务器响应如下 

     关于重定向的使用场景：

    • 永久重定向：网站更新，比如搜索引擎会定期访问网站，可以根据永久重定向进行更新。
    • 临时重定向：跳转至指定页面，后续可能改变（登录页面、广告等）。

    5. Cookie 缓存​​​​​​​

    Cookie，有时也用其复数形式 Cookies。Cookies，指某些网站为了辨别用户身份而储存在用户​​​​​​​​​​​​​​本地终端上的数据（通常经过加密）。Cookies最典型的应用是判定注册用户是否已经登录网站，用户可能会得到提示，是否在下一次进入此网站时保留用户信息以便简化登录手续，这些都是Cookies的功用。

    HTTP 协议本身是无状态的（不保存数据），主要的工作是完成 超文本传输，实际上用户在登录网站时，除了第一次需要手动登录外，后续一段时间内都不需要登录：

    这个现象称为 会话保持，可以大大提高提升用户使用体验，那么无状态的 HTTP 是如何实现 会话保持 的呢？

    答案是使用 Cookie，用户在第一次登录时，服务器的响应中会包含 Set-Cookie: 账号&密码 这个报头，浏览器会保存 Cookie 相关的信息，后续再访问该网站时，在请求中自动添加 Cookie 报头，服务器完成验证后即可实现自动登录：

    用户后续一段时间内再访问该网站时，看似不需要登录，实际每次都在使用 Cookie 登录，不过这个工作是由浏览器自动完成的，用户几乎感知不到，可以查看浏览器中保存的 Cookie 信息。

    注意： Cookie 可以保存为内存级（只有本次使用浏览器期间有效，安全），也可以保存为文件级（关闭浏览器后仍然有效，方便）。

    我们点击网址左边的锁图标可以查看cookie：

    前面说过，无论是 GET 还是 POST 方法，都是不安全的，如果 HTTP 中关于 Cookie 的设计真这么简单（直接在报头中携带 账号&密码），那么账号早被盗用了。

    木马病毒：
    这是一种植入性病毒，如果我们下载了携带病毒的软件，或者是访问了不安全的网站，就有可能导致 Cookie 泄漏，当其他人掌握 Cookie 时，就可以利用该 Cookie 直接登录网站，窃取关键信息。

    真正的 Cookie 使用了这样一个解决方案：

    • 根据 账号&密码 生成 session 对象，将 session 对象 id 作为 Set-Cookie 的值传给浏览器。
    • 登录时，只需要判断 id 是否存在
    • session id 具有唯一性

     使用了 seesion id 就能避免 Cookie 泄漏吗？

    • 不能，照样会发生泄漏，但至少此时泄漏的不是敏感信息。

    服务器可以制定安全策略，识别是否为异常登录：

    • IP比对：识别登录用户的IP在短时间内是否发生了改变。
    • 行为检测：识别用户是否存在异常信息，比如QQ突然大面积发生消息、添加好友。

    ​​​​​​​当服务器判定异常登录后，就会释放服务器中存储的 session id，这就意味着原本的 session id 失效了，需要重新输入密码登录

    • 如果是用户，重新使用 账号&密码 登录后，获取服务器重新生成的 session id 即可
    • 其他人则无法登录，因为没有 账号&密码

    session id 对比直接存储 账号&密码 最大的优势在于 session id 更新成本低，且更加安全

    如何生成唯一的 session id
    可以通过哈希加密算法进行计算，比如 MD5、SHA256

    通过 HTTP 服务器验证 浏览器在请求时会自动加上 Cookie 报头

    启动服务器，并使用浏览器进行访问，首先可以看到 浏览器已经存储了 Cookie 信息，也就是服务器响应的 session id

    此时的请求是这样的

    再次进行请求，请求就会变成这样，浏览器自动携带了 Cookie 报头，服务器就可以通过 session id 进行验证了 

    如何在服务器中实现 session ？

    伪代码实现如下：

    1. class Response
    2. {
    3. 	// ...
    4. 	
    5.     class Session
    6.     {
    7.     public:
    8.         Session(const std::string& id, const std::string& passwd)
    9.             :_id(id), _passwd(passwd)
    10.         {}
    11.  
    12.         ~Session()
    13.         {}
    14.  
    15.     public:
    16.         std::string _id;
    17.         std::string _passwd;
    18.         std::string _login_time; // 登录时间
    19.         std::string _status;     // 用户状态
    20.     };
    21.  
    22.     // 首次登录
    23.     int Login(const Request& req)
    24.     {
    25.         // 获取 账号&密码 等关键字段
    26.         std::string id, passwd;
    27.         GetValue(req, &id, &passwd);
    28.  
    29.         // 判断用户是否存在、密码是否正确
    30.         if(Check(id, passwd) == true)
    31.         {
    32.             // 根据关键字段构建 session 对象
    33.             Session* ss = new Session(id, passwd);
    34.  
    35.             // 根据 session 对象生成 session id
    36.             int ssID = SessionMD5(ss);
    37.  
    38.             // 存储映射关系
    39.             _sessions[ssID] = ss;
    40.  
    41.             // 返回 ssID
    42.             return ssID;
    43.         }
    44.  
    45.         return 0;
    46.     }
    47.  
    48.     std::unordered_map<int, Session*> _sessions;
    49.  
    50. 	// ...
    51. };

    当浏览器获取到 session id 后，会使用 session id 进行判断，可以将 _sessions 中的数据写入文件中，将 session id 与 session 对象的映射关系持久化存储。

    也可以使用 Redis 这种关系型数据库存储映射关系，更加高效。

    6. 补充

    常见的 Header 如下表所示

    关于 Connection 属性，一个网页中包含多份资源，每一份资源的都需要发起一个单独的 HTTP 请求，为了避免请求时与服务器的连接断开（也为了提高效率），可以设置 keep-alive 表示 长连接 默认，确保所有的资源都能请求完成。

    关于 /favicon.ico 资源，这是一个小图标，显示在网页标题的左侧，添加之后可以提高网页的辨识度，这个资源由浏览器自动发起请求

  • 相关阅读:
    生成式 AI 落地制造业的关键是什么？亚马逊云科技给出答案
    每天五分钟计算机视觉：使用神经网络完成人脸的特征点检测
    GitLab首席执行官的日常
    HTML常用标签
    调用API来获取拼多多的商品数据的详细步骤和注意事项
    72. 编辑距离
    【开源】基于Vue.js的智能停车场管理系统的设计和实现
    『亚马逊云科技产品测评』活动征文｜AWS 存储产品类别及其适用场景详细说明
    kafka生产者如何提高吞吐量
    Vue.js入门教程（六）
  • 原文地址：https://blog.csdn.net/weixin_61522065/article/details/137995774