(HTTP篇)HTTP协议原理

·  阅读 611

一、五层网络模型

  • 1.物理层:主要作用是定义物理设备如何传输数据

  • 2.数据链路层:在通信的实体间建立数据链路连接

  • 3.网络层:为数据在结点之间传输创建逻辑链路

  • 4.传输层:向用户提供可靠的端到端(End-to-End)服务,传输层向高层屏蔽了下层数据通信的细节

  • 5.应用层:为应用软件提供了很多服务,构建于TCP协议之上,屏蔽网络传输相关细节

二、HTTP

  • 1.三次握手

三、URI-URL和URN

  • 1.URI:Uniform Resource Identifier/统一资源标识符,用来唯一标识互联网上的信息资源,包括URL和URN
  • 2.URL:Uniform Resource Locator/统一资源定位器,http://user:pass@host.com:80/path?query=string#hash

此类格式的都叫做URL,比如ftp协议

  • 3.URN:永久统一资源定位符,在资源移动之后还能被找到,目前还没有非常成熟的使用方案

四、HTTP报文

  • 1.HTTP方法:用来定义对于资源的操作,常用有GET、POST等、从定义上讲有各自的语义
  • 2.HTTP CODE:定义服务器对请求的处理结果,各个区间的CODE有各自的语义,好的HTTP服务可以通过CODE判断结果

五、创建一个简单的web服务

  • 1.安装nodejs
  • 2.创建文件夹,然后添加server.js
const http = require('http');
http.createServer(function (request, response){
    console.log('request com', request.url)

    response.end('123');
}).listen(8888)
console.log('server listening on 8888');
复制代码

六、跨域请求的限制与解决

  • 1.说明:浏览器对请求返回的拦截
  • 2.出现跨域的场景:

不同域名;主域名相同,子域名不同;域名和域名对应相同ip;同一域名,不同协议;同一域名,不同端口;同一域名,不同文件或路径;

  • 3.解决方法:

jsonp、配置响应头

  • 4.案例

test.html 测试的html代码 发起跨域ajax请求

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
    </body>
    <!-- 使用jsonp,可以解决跨域 -->
    <!-- <script src="http://127.0.0.1:8887/"></script> -->
    <script>
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://127.0.0.1:8887/')
        xhr.send()
    </script>
</html>
复制代码

server.js构建服务,使用test.html发起跨域请求

const http = require('http');
const fs = require('fs')

http.createServer(function (request, response){
    console.log('request com', request.url)

    const html = fs.readFileSync('test.html', 'utf8');
    response.writeHead(200, {
        'Content-Type': 'text/html'
    })
    response.end(html);
}).listen(8888)

console.log('server listening on 8888');
复制代码

server2.js 接收服务器,解决跨域问题

const http = require('http');

http.createServer(function (request, response){
    console.log('request com', request.url)

    // 处理跨域
    // response.writeHead(200, {
    //     'Access-Control-Allow-Origin': '*' // 全部允许
    // })
    // 某个特定的域名
    response.writeHead(200, {
        'Access-Control-Allow-Origin': 'http://127.0.0.1:8888' // 全部允许
    })
    response.end('123');
}).listen(8887)

console.log('server listening on 8887');
复制代码

七、CORS跨域限制预请求验证

  • 1.允许方法

GET
HEAD
POST

  • 2.允许Content-Type

text/plain
multipart/form-data
application/x-www-form-urlencoded

  • 3.其他限制

请求头限制
XMLHttpRequestUpload对象均没有注册任何事件监听器
请求中没有使用ReadableStream对象

  • 4.例
response.writeHead(200, {
    'Access-Control-Allow-Origin': '*', // 全部允许
    'Access-Control-Allow-Headers': 'X-Test-Cors',
    'Access-Control-Allow-Methods': 'POST, PUT, DELETE',
    'Access-Control-Max-Age': '1000'
})
复制代码

八.缓存头Cache-Control

  • 1.可缓存行

public http经过的任何地方都可以发起缓存
private 发起请求的浏览器上才可以进行缓存
no-cache 任何节点都不可以缓存

  • 2.到期

max-age=<seconds> 设置过期时间
s-maxage=<seconds> 为代理服务器设置的读取过期时间
max-stale=<seconds> 即便缓存过期,在这个设置时间内也可用过期的缓存 PS:浏览器一般用不到

  • 3.重新验证【不太会用到】

must-revalidate 在我们设置max-age过期之后,必须重新发起请求,重新获取
proxy-revalidate 用在缓存服务器中

  • 4.其他

no-cache 每次发起请求都需要和服务器端进行验证,判断是否能使用本地的缓存 PS:本地可以存缓存
no-store 本地和代理服务器都不可以使用缓存
no-transform 告诉代理服务器不要改变返回内容

九、缓存验证Last-Modified和Etag

  • 1.Last-Modified

上次修改时间
配合If-Modified-Since或者If-Unmodified-Since使用
对比上次修改时间以验证资源是否需要更新

  • 2.Etag

数据签名 资源内容修改,签名就会不一样,然后重新获取资源
配合If-Match或者If-Non-Match使用
对比资源的签名判断是否使用缓存

十、Cookie&Session

  • 1.Cookie

Cookie,简而言之就是在本地计算机保存一些用户操作的历史信息(当然包括登录信息),并在用户再次访问该站点时浏览器通过HTTP协议将本地cookie内容发送给服务器,从而完成验证或继续上一步操作。

通过Set-Cookie设置
下次请求会自动带上
键值对,可以设置多个
Cookie属性

max-age和expires设置过期时间 secure只在https的时候发送 设置HttpOnly无法通过document.cookie访问

  • 2.session

session,简而言之就是在服务器上保存用户操作的历史信息。服务器使用session id来标识session,session id由服务器负责产生,保证随机性与唯一性,相当于一个随机密钥,避免在握手或传输中暴露用户真实密码。

十一、HTTP长连接

分类:
前端
标签: