Keep moving just play & have fun

HTTP相关

2018-03-14
May

阅读：

Web
   

axios简介

axios是一个基于Promise用于浏览器和nodejs的HTTP客户端，具有以下特征：

  • 从浏览器中创建XMLHttpRequest

  • 从nodejs发出http请求

  • 支持Promise API

  • 拦截请求和响应

  • 转换请求和响应数据

  • 取消请求

  • 自动转换JSON数据

  • 客户端支持防止CSRF/XSRF

CSRF(Cross-site Request Forgery), 跨站点请求伪造，跟XSS攻击一样，存在巨大危害。
防御CSRF攻击
目前防御CSRF攻击主要有三种策略：

* 验证HTTP Referer字段  

* 在请求地址中添加token并验证  

* 在HTTP请求头中自定义属性并验证

HTTP协议

HTTP协议是Hyper Text Transfer protocal（超文本传输协议）的缩写，用于从万维网服务器传输超文本到本地浏览器的传送协议。

HTTP协议是一个基于TCP／IP通信协议来传递数据的。

主要特点

  1. 简单快速
  2. 灵活，允许传输任意类型的数据对象，由Content-Type标记传输类型。
  3. 无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，及断开连接。采用这种方式可以节省传输时间。
  4. 无状态：HTTP协议时无状态的。无状态是指协议对于事物的处理没有记忆能力。

HTTP之请求消息Request

客户端发送一个HTTP请求到服务器的请求消息包括以下格式：

请求行

请求头

空行

请求数据

GET /562f25980001b1b106000338.jpg HTTP/1.1
Host img.mukewang.com
User-Agent Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36
Accept image/webp,image/,/*;q=0.8
Referer http://www.imooc.com/
Accept-Encoding gzip, deflate, sdch
Accept-Language zh-CN,zh;q=0.8

HTTP之响应消息Response

一般情况下，服务器接受并处理客户端发过来的请求后会返回一个HTTP的响应消息。HTTP响应消息也由四部分组成：

状态行

消息报头

空行

响应正文

例子：

HTTP/1.1 200 OK
Date: Fri, 22 May 2009 06:07:21 GMT
Content-Type: text/html; charset=UTF-8

<html>
      <head></head>
      <body>
            <!--body goes here-->
      </body>
</html>

HTTP工作原理

HTTP协议采用请求/响应模型，客户端向服务器端发起一个请求报文，请求报文包含请求方法，URL，协议版本，请求头和请求数据。服务器以一个状态行作为响应，响应的内容包括协议的版本，成功活着错误的状态码，服务器信息，响应头部和响应数据。

HTTP请求／响应的步骤：

1. 客户端连接到Web服务器

一个HTTP客户端，与Web服务器的HTTP端口（默认为80）建立一个TCP套接字连接。

2. 发送HTTP请求

通过TCP套接字，客户端向服务器发送一个请求报文，一个请求报文包括请求行，请求头，空行，请求数据。

3. 服务器接受请求并返回HTTP响应

Web服务器解析请求，定位请求资源，殭资源副本写到TCP套接字，由客户端读取。一个响应由状态行，响应头部，空行和响应数据组成。

4. 释放TCP连接

若connection模式为false，则服务器主动关闭TCP连接，客户端被动关闭连接，释放TCP连接。若connection模式为keep-alive，则该连接会保持一段时间，在该时间内可以继续接收请求。

5. 客户端浏览器解析HTML内容

客户端浏览器首先解析状态行，查看状态码。然后解析每个响应头。客户端读取相应数据，根据html语法对其进行格式化，并在浏览器窗口中显示。

简言之，HTTP就是一个用文本格式描述报文头，并用双换行分隔报文头和内容，在TCP基础上实现的请求－响应模式的双向通信协议

GET和POST的区别

首先是功能用途的区别，GET重点是在从服务器上获取资源，POST重点是在向服务器发送数据。

  1. GET提交的数据会放在URL后面，以？分割URL和传输数据，参数之间以&符号相连。POST则是把提交的数据放到HTTP包的body中。

  2. GET提交的数据大小有限，但效率高。POST可以传输大量数据。

  3. GET是不安全的，因为URL是可见的。POST安全性较高。

  4. GET方式只能致辞ASCII字符集，向服务器传递中文可能会乱码。POST支持标准字符集，可以正确传递中文字符。

HTTP协议是无状态的与Connection: keep-alive的区别

无状态是指协议对于事物处理没有记忆能力，服务器不知道客户端是什么状态。

HTTP协议是一个无状态的面向连接的协议，无状态不代表HTTP不能保持连接，更不能代表HTTP使用的是UDP（无连接）。

从HTTP/1.1开始，默认都开启了keep-alive，保持连接。简单地说，当一个网页打开完成后，客户端和服务器端之间传输HTTP数据的TCP连接不会关闭，如果客户端再次访问服务器上的网页，会继续使用这一条已经建立的连接。keep-alive不会永久保持连接，它有一个保持时间，可以在不同的服务器软件（如Apache）设置这个时间。

HTTP 代理

HTTP Cache

HTTP缓存指我们用浏览器访问网站时，根据服务器返回的HTTP缓存响应头设置，缓存相应的数据，下次访问可直接使用，这样可以大大减轻宽带压力，加快网页加载速度。

服务器返回的几个缓存控制头部内容：

  1. Last-Modified:表示文档的最后修改时间，当去服务器验证时会使用这个时间对比。
  2. Expires：http/1.0规范定义，表示文档在浏览器中的过期时间，超过这个时间，则需要重新从浏览器获取最新的内容。
  3. Cache-Control：HTTP/1.1规范中定义，表示浏览器缓存控制，max-age=315600表示文档可以在浏览器中缓存一年。
  4. ETag：发送到服务器端进行内容变更验证的，使用弱实体W\”6124c”。

HTTP访问控制（CORS）

处于安全考虑，浏览器限制从脚本内发起的跨源HTTP请求。XMLHttpRequest和Fetch API都遵循同源策略。这意味着使用这些API的Web应用只能从加载应用程序的同一个域请求HTTP资源，除非使用CORS。

CORS需要客户端和服务端的同时支持。目前所有浏览器都支持该机制。

跨域资源共享标准（cross-origin sharing standard）允许服务器声明哪些源站可以访问哪些资源。另外，规范要求，对那些可能对服务器数据造成副作用的HTTP请求方法（特别是除了GET以外的HTTP请求，或者搭配某些MIME类型的POST请求），浏览器必须首先使用OPTIONS发起一个预检请求（preflight request），以确认服务器端是否允许该跨域请求。在预检请求的返回中，服务器端也可以通知客户端，是否需要携带身份信息（包括cookies和HTTP认证相关数据）。

预检请求

与简单请求不同，“需预检的请求”要求首先使用OPTIONS 方法发起一个预检请求到服务器。

“需预检的请求”包括：

  • 使用了下面任一HTTP方法的请求:
    • PUT
    • DELETE
    • CONNECT
    • OPTIONS
    • TRACE
    • PATCH

  • 人为设置了对 CORS 安全的首部字段集合之外的其他首部字段。

  • Content-Type的值不属于下列之一：
    • application/x-www-form-urlencoded
    • multipart/form-data
    • text/plain

身份认证withCredenials

对于跨域XMLHttpRequest和Fetch情感球，浏览器不会发送身份凭证信息，如果要发送凭证信息，需要设置XMLHttpRequest的withCredentials为true浏览器则会向服务器发送Cookies。

对于附带身份凭证的请求，服务器不得设置Access-Control-Allow-Origin的值为“*”

上一篇 Angular1.x实践总结

下一篇 h5相关

Comments

Content