http 协议梳理

引言

很多开发者对于网络知识这块了解的不是很多，遇到这些面试题会手足无措。本篇文章主要集中在 HTTP 这块，对相关知识进行整理并梳理。如有不足，万望辅正。

http 协议特点

• 简单 因为每个资源的URI是固定的，所以访问这个资源是简单的

• 灵活 头部有数据类型，通过一个HTTP协议，可以完成不同数据类型的传输

• 无连接 一次连接完成后，就会断开连接，不会持续连接

• 无状态 服务端无法单纯靠HTTP协议区分两次http请求之间的关系

http 报文组成

• 请求报文：

  • 请求行（包含http方法、页面地址、http协议及版本）

  • 请求头（key-value值，告诉服务端要什么内容，注意什么类型）

  • 空行 （标志请求头结束，请求体开始）

  • 请求体（数据部分）

• 响应报文：

• 状态行（http协议及版本、状态码）

• 响应头

• 空行

• 响应体

http 方法

http 状态码

http 演化

长连接：在一个TCP连接上可以传送多个HTTP请求和响应，减少了建立和关闭连接的消耗和延迟，在HTTP1.1中默认开启Connection： keep-alive，一定程度上弥补了HTTP1.0每次请求都要创建连接的缺点。

http1.1 长连接和 http2.0 多路复用的区别

http1.1 长连接：若干个请求排队串行化单线程处理，后面的请求等待前面请求的返回才能获得执行机会，一旦有某请求超时等，后续请求只能被阻塞，毫无办法，也就是人们常说的线头阻塞；

http2.0 多路复用：多个请求可同时在一个连接上并行执行。某个请求任务耗时严重，不会影响到其它连接的正常执行；

SSL 连接

中间人攻击

简单地说，就是黑客通过各种各样的技术手段，在服务端发送出的html报文与显示屏呈现出的web页面之间做了一些手脚， 篡改网页的部分或全部内容，从而改变用户在浏览器视窗中看到的内容。

常见的是往web页面里塞入一些广告厂商的DOM元素，也有可能直接把网络请求劫持到另外一台服务器， 很可能是个钓鱼站。

解决方法

将 http 协议升级为 https 协议

http 缓存

缓存流程

• 客户端发送请求

• 向缓存询问是否存在与之有关的强缓存信息（包括Expires、Cache-Control, Cache-Control优先级更高）

  • 有，如果未过期，则直接返回缓存数据

• 询问是否有关于协商缓存

  • 是否有 Etag

    • 有，向服务端发送请求，携带上 If-None-Match: Etag

  • 是否有 Last-Modified

    • 有，向服务端发送请求，携带上 Last-Modified-Since: Last-Modified

• 直接请求，获取响应体和缓存规则

• 将数据和缓存规则写入缓存

同源策略

是浏览器出于安全考虑的一种策略。协议、域名、端口三者有一不同，就是跨域。

请求类型

跨域方式

• JSONP

  // 客户端
  function jsonp(req) {
      var url = req.url + '?callback=' + req.callback.name;
      var script = document.createElement('script');
      script.src = url;
      var tag = document.body.appendChild(script);
  }
  
  function success(res) {
      console.log(res.data);
  }
  
  var req = {
      url: 'http://localhost:3000/json',
      callback: success
  }
  jsonp(req);// 客户端动态创建script标签，并且添加callback函数
  
  
  
  // 服务端
  var express = require('express');
  const app = express();
  
  app.listen(3000,() => {
      console.log('server is running in 3000 port');
  })
  
  var data = {
      data: {
          'hello': 'world'
      }
  }
  
  app.get('/json', (req, res) => {
      var params = req.url.split('?')[1].split('&');
      var callback = '';
      params.forEach(item => {
          var splits = item.split('=');
          var key = splits[0];
          var value = splits[1];
          if(key === 'callback') {
              callback = value;
          }
      })
  
      var ans = callback + '(' + JSON.stringify(data) + ')';
      res.send(ans);
  }) // 服务端获取callback函数名，将函数名与响应数据拼接，返回，客户端就会自动调用callback函数
  

• CORS
  

  Access-Control-Allow-Origin: "www.baidu.com" // 标识可接受的跨域请求源
  Access-Control-Allow-Methods: POST, GET, OPTIONS //标识可接受的跨域请求方法
  Access-Control-Allow-Headers: X-PINGOTHER, Content-Type //标识可接受的跨域请求自定义头
  Access-Control-Max-Age: 86400。 //标识本次预请求的有效时间（秒），期间内无需再发送预请求；
  Access-Control-Allow-Credentials: true // 跨域发送 Cookie
  

• postMessage
  

  otherWindow.postMessage(message, targetOrigin, [transfer]);
  // otherWindow指的是目标窗口，也就是要给哪一个window发送消息
  // targetOrigin是限定消息接受范围，不限制就用星号 *

• WebSocket

• hash + iframe

• node 代理跨域

• nginx 代理跨域

参考

如果觉得想深入了解，请阅读以下文章。以下都与http 协议相关，且作者觉得不错的文章。

HTTP协议知识点总结

HTTP1.0、HTTP1.1 和 HTTP2.0 的区别

具有代表性的 HTTP 状态码

HTTP缓存机制

跨域解决方案

图解HTTP

整理不易，觉得不错，就点个赞吧！希望对您有所帮助。