[HTTP] HTTP各种特性总览

CORS跨域请求的限制与解决

返回数据时设置头信息,只能有一个域名,需要多个域名要判断

const http = require('http')
http. createServer(function (request, response) {
    res.writeHead(200,{
        "Access-Control-Allow-Origin":'*'
    })
}).listen( 8887 )
console.log( 'server listening on 8887' )

 
 

CORS跨域限制以及预请求验证

允许方法

• GET

• HEAD

• POST

 

允许Content-Type

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

其他限制

• 请求头限制

• XMLHttpRequestUpload对象均没有注册任何事件监听器

• 请求中没有使用ReadableStream对象
   

预请求

const http = require('http')
http. createServer(function (request, response) {
    res.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'
    })
}).listen( 8887 )
console.log( 'server listening on 8887' )

 
 

缓存头Cache-Control的含义和使用

可缓存性

• public
  • 任何代理服务器都可以对数据进行缓存
• private
  • 只有发起请求的浏览器可以缓存
• no-cache
  • 任何一个节点都不可以缓存
     

到期

• max-age=

  • 设置时间过期,过期后再次发送请求到服务器请求信内容

• s-maxage=

  • 在代理服务器里才生效

• max-stale=

  • 在max-stale时间内,即使max-age时间过期,也可以使用(浏览器用不到)

const http = require('http')
http. createServer(function (request, response) {
    res.writeHead(200,{
        'Cache-Control': ' max-age=200'
    })
}).listen( 8887 )
console.log( 'server listening on 8887' )

刷新缓存：可以文件名后加入根据内容生成的哈希码。

 

重新验证

• must-revalidate

  • 如果缓存已经过期，需要向源服务端重新获取数据，不能直接使用

• proxy-revalidate

  • 缓存服务器必须在过期时在源服务器重新请求
     

其他

• no-store
  • 本地和代理不可以缓存
• no-transform
  • 不可以随便改动返回的内容

 
 

缓存验证Last-Modified和Etag的使用

 

Last-Modified

• 上次修改时间

• 配合If-Modified- Since或者If-Unmodified-Since使用

• 对比上次修改时间以验证资源是否需要更新

 

Etag

• 数据签名
• 配合If-Match或者If-Non-Match使用
• 对比资源的签名判断是否使用缓存

if (request.url === '/script.js'){
        console.log(request.headers)
        const etag = request.headers('if-none-match')
        if(etag === '777'){
            response.writeHead(304,{
                'Content-Type': 'text/javascript',
                'Cache-Control': ' max-age=200000,no-cache',
                'Last-Modified':'123',
                "Etag":'777'
            })
            response.end('456')
        }else{
            response.writeHead(200, {
                'Content-Type': 'text/javascript',
                'Cache-Control': ' max-age=200000,no-cache',
                'Last-Modified':'123',
                "Etag":'777'
            })
            response. end('console.log("script loaded")' )
        }

    }

 

 

cookie和session

Cookie

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

不能够跨域去设置Cookie

Cookie≠session

 

Cookie属性

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

const http = require('http')
http. createServer(function (request, response) {
    response.writeHead(200, {
            'Content-Type': ' text/html',
            'Set-Cookie':['id=123;max-age=2','abc=456;HttpOnly']
        })
}).listen( 8887 )
console.log( 'server listening on 8887' )

 

 

HTTP长连接

HTTP1.1中有6个并发的链接

HTTP2在一个TCP链接可以并发的发送多个请求

const http = require('http')
http. createServer(function (request, response) {
    response.writeHead(200, {
            'Content-Type': ' text/html',
            "Connection":"close",
            "Connection":"keep-alive"
        })
}).listen( 8887 )
console.log( 'server listening on 8887' )

 
 

数据协商

分类

• 请求(客户端)

  • Accept
    • 明确想要接收数据的类型
  • Accept-Encoding
    • 明确编码方式，限制服务端压缩方式
  • Accept-Language
    • 返回信息判断是中文还是英文
  • User-Agent
    • 判断浏览器相关信息

• 返回(服务端)

  • Content-Type
    • 选择一种数据格式,作为真正返回的数据格式进行返回(申明)
  • Content-Encoding
    • 对应Accept-Encoding
  • Content-Language
    • 对应Accept-Language

const http = require('http')
http. createServer(function (request, response) {
    response.writeHead(200, {
            'X-Content-Type-Options':'nosniff',
            'Content-Encoding':'gzip'
        })
}).listen( 8887 )
console.log( 'server listening on 8887' )

 

 

Redirect

301:永久跳转(变更),除非清除浏览器缓存

302:临时跳转

const http = require("http");
const fs = require("fs");
http.createServer(function (req, res) {
    console.log("request come", req.url);
    if (req.url === "/") {
        res.writeHead(302, {
            Location: "/new",
        });
        res.end("");
    } else {
        res.writeHead(200, {
            "Content-Type": "text/html",
        });
        res.end("<div>this is content</div>");
    }
}).listen(8888);
console.log("server listening on 8888");

 
 

CSP

全称Content-Security-Policy,意为内容安全策略

了解更多参考网址

作用

• 限制资源获取
• 报告资源获取越权
   

限制方式

• default-src限制全局
• 指定资源类型
  • connect-src
    • 请求发向的目标的限制
  • font-src
    • 策略可以包含一个或多个源
  • frame-src
    • 可以允许一个或多个源
  • media-src
    • 可以允许一个或多个源
  • manifest-src
    • 可以允许一个或多个源
  • img-src
    • 图片可以从哪些网址上加载
  • style-src
    • 样式和脚本的资源从哪些网址上加载
  • script-src
    • 样式和脚本的资源从哪些网址上加载
  • 。。。
     

实例

• 只能限制去加载我们本站提供的外链的脚本

  "Content-Security-Policy": "default-src default-src\'self\' "
  

• 只能限制加载某个网站的内容

  "Content-Security-Policy": "default-src default-src\'self\' https://www.baidu.com"
  

• 只能限制表单

  "Content-Security-Policy": "default-src \'self\'; form-action \'self\'"