HTTP协议原理+实践

·  阅读 135
HTTP协议原理+实践

浏览器输入URl后HTTP请求的完整过程

为什么要有端口:

每一台服务器都有非常多的端口 在一台服务器上可以有很多的web服务 ,它可以监听各种不同的端口 如果要找这台物理服务器上面的web服务存放的某些资源,就要指定端口

为什么上线之后没有端口:

不带端口的情况下默认传80端口,方便记忆

哈希#hash的作用:

标识定位到文档中的某个资源(有时候文件很大好几兆 并不需要全部返回,只需要返回某个资源 起到锚点定位作用)

关于跨域:

协议,端口,域名不同

注意:浏览器允许在script link image标签上写src属性是允许跨域的 不在乎是否设置了跨域的头(jquery的jsonp跨域就是利用在这些标签中加了一个连接来进行服务器的请求) CORS预请求:(前提是跨域,跨域才会产生预请求)

GET HEAD POST 这三种方法之外都需要服务端进行预请求验证

Content-Type 类型 这三种之外都需要服务端(Access-Control-Allow-Headers)进行预请求验证

预请求会返回一个OPTIONS方法(表示预请求) 此方法不属于xhr,所以需要在控制台的all中查看 服务端响应

'Access-Control-Allow-Origin':'*'//允许所有跨域请求(或者写一个网址)
'Access-Control-Allow-Headers':'X-Text-Cors' //允许的请求头 看笔记  查看cdn
'Access-Control-Allow-Methods':'POST,PUT'//允许请求的方法
'Access-Control-Max-Age':'1000'//允许跨域请求的最长时间(在10000秒之内不需要再发送预请求 直接发起正式的请求就可以了)

http.createServer(function (request, response) {
  console.log('request come', request.url)
  response.writeHead(200, {
    'Access-Control-Allow-Origin': 'http://127.0.0.1:8888',
    'Access-Control-Allow-Headers': 'X-Test-Cors',
    'Access-Control-Allow-Methods': 'POST, PUT, DELETE',
    'Access-Control-Max-Age': '1000'
  })
  response.end('123')
}).listen(8887)
客户端请求
  fetch('http://localhost:8889', {
    method: 'POST', //如果配置成delete会请求失败
    headers: {
      'X-Test-Cors': '123' //如果不写可请求成功,也不会发送options预请求,如果写了, 就需要和服务端配置一样,否则请求会失败
      'Content-Type':'text/plain'  // 也可也不配置
    }
  })
复制代码

缓存Cache-Control

public

http所经过的任何地方都可以进行缓存(包括:发送请求的客户端,代理服务器,等等)

private

只有发起请求的浏览器(客户端)才会进行缓存

no-cache

可以进行缓存,但在使用已存储的缓存数据前,发送带验证器的请求到原始服务器

no-store

禁止缓存

max-age=<second>

缓存最大时间 单位:秒

属性可以共存 例如:

Cache-Control: no-cache, no-store 缓存中读取数据

如何禁止缓存?

前端解决方案:前端会在打包文件内容的后面加一段哈希码(这段哈希码是根据内容变化而变化的,比如js或图片文件,内容不变,哈希码不变,反映到页面上也就是url是否变化)来判断是否能被缓存 资源验证(条件缓存)

必须是设置了: 'Cache-Control': 'max-age=2000000, no-cache',

资源验证头

Etag的验证更加严格(它们两个的目是相同的)

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

http.createServer(function (request, response) {

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

  if (request.url === '/script.js') {
    
    const etag = request.headers['if-none-match']
    if (etag === '777') {
      response.writeHead(304, {
        'Content-Type': 'text/javascript',
        'Cache-Control': 'max-age=2000000, no-cache',
        'Last-Modified': '123',
        'Etag': '777'
      })
      response.end()
    } else {
      response.writeHead(200, {
        'Content-Type': 'text/javascript',
        'Cache-Control': 'max-age=2000000, no-cache',
        'Last-Modified': '123',
        'Etag': '777'
      })
      response.end('console.log("script loaded twice")')
    }
  }
}).listen(8888)
复制代码
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改