HTTP各种特性总览

最新推荐文章于 2021-07-27 15:00:17 发布

自然醒^

最新推荐文章于 2021-07-27 15:00:17 发布

阅读量149

点赞数

本文链接：https://blog.csdn.net/Lime_00/article/details/108374967

版权

CORS 跨域请求的限制与解决

在返回数据时设置头信息即可，例如：

const http = require("http");
http.createServer(function (req, res) {
    res.writeHead(200,{
    	"Access-Control-Allow-Origin":'*'
    })
}).listen(8888);xxxxxxxxxx const http = require("http");http.createServer(function (req, res) {    res.writeHead(200,{        "Access-Control-Allow-Origin":'*'    })}).listen(8888);Javascriptconst http = require("http");http.createServer(function (req, res) {    res.writeHead(200,{       "Access-Control-Allow-Origin":'*'    })}).listen(8888);

跨域是由浏览器限制的，浏览器允许 img、script、link 等标签访问不同域的内容。

将其中的 * 设置为某个域名，那么则标识只允许某个域名可以访问。但是只能一个域名，如果需要多个域名需要增加服务器逻辑进行判断。

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

当请求头中包含一些自定义的头信息，那么默认情况下同样会收到跨域限制，因此需要设置允许的头：

const http = require("http");
http.createServer(function (req, res) {
    res.writeHead(200,{
    	"Access-Control-Allow-Origin":'*',
        //设置允许的请求头
        "Access-Control-Allow-Headers":'X-Test-Cors',
        //设置允许的请求方法
        "Access-Control-Allow-Methods":'POST,PUT,Delete',
        //设置最长时间，即1000S内无需再次发送预请求
        "Access-Control-Max-Age":'1000',
    })
}).listen(8888);

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

public

任何代理服务器都可以对数据进行缓存
private

只有发起请求的浏览器可以缓存
no-cache

任何一个节点都不可以缓存

设置缓存

const http = require("http");
http.createServer(function (req, res) {
    res.writeHead(200,{
    	"Cache-Control":'max-age=20',
    })
}).listen(8888);

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

重新验证

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 使用，对比资源的签名判断是否使用缓存。

Cookie 和 Seesion

Cookie 包含的属性

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

const http = require("http");
http.createServer(function (req, res) {
    res.writeHead(200,{
    	"Cache-Control":'max-age=20',
        // 设置过期时间2s的cookie
        "Set-Cookie":'id=123;max-age=2',
        "Set-Cookie":'abc=456',
    })
}).listen(8888);

Cookie 存在过期时间，如果不设置过期时间，那么过期时效为浏览器关闭时。

为主域设置 Cookie 后所有子域都可以使用 Cookie。

Session 通常的使用方法时，通过 cookie 设置 session。

HTTP 长连接

HTTP1.1 中有 6 个并发的链接。而 HTTP2 在一个 TCP 链接可以并发的发送多个请求，因此只需要一个链接即可！

创建长连接

const http = require("http");
http.createServer(function (req, res) {
    res.writeHead(200,{
    	"Connection":"keep-alive"
    })
}).listen(8888);

Connection 为 close 时，表示不适用 http 长链接。

数据协商

服务端根据请求段携带的数据而确定返回何种数据。

客户端：
1. Accept
  
  明确想要接收数据的类型
2. Accept-Encoding
  
  明确编码方式，限制服务端压缩方式
3. Accept-Language
  
  明确返回信息是中文还是英文
4. User-Agent
  
  判断浏览器信息
服务器端
1. Content-Type
  
  作为真正返回的数据格式进行返回
2. Content-Encoding
  
  对应 Accept-Encoding
3. Content-Language
  
  对应 Accept-Language

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");

浏览器会默认长期缓存 301。因此使用 301 时要谨慎。

CSP

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

限制方式

default-src 限制全局
指定资源类型
- img-src
- style-src
- script-src
- 。。。

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

http
  .createServer(function (req, res) {
    console.log("request come", req.url);
    const html = fs.readFileSync("index.html", "utf-8");
    res.writeHead(200, {
      "Content-Type": "text/html",
      // 只允许http或者https方式加载，而不允许执行内联的script脚本
      "Content-Security-Policy": "default-src http: https:",
    });
    res.end(html);
  })
  .listen(8888);

console.log("server listening on 8888");

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        console.log(1)
    </script>
</body>

</html>

限制只能加载本服务器的内容

createServer(function (req, res) {
    console.log("request come", req.url);
    const html = fs.readFileSync("index.html", "utf-8");
    res.writeHead(200, {
        "Content-Type": "text/html",
        // 限制只能加载本服务器的内容
        "Content-Security-Policy": "default-src \'self\'",
    });
    res.end(html);
})

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

createServer(function (req, res) {
    console.log("request come", req.url);
    const html = fs.readFileSync("index.html", "utf-8");
    res.writeHead(200, {
        "Content-Type": "text/html",
        // 限制只能加载某个网站的内容
        "Content-Security-Policy": "default-src https://cdn.jsdelivr.com/",
    });
    res.end(html);
})

限制表单

createServer(function (req, res) {
    console.log("request come", req.url);
    const html = fs.readFileSync("index.html", "utf-8");
    res.writeHead(200, {
        "Content-Type": "text/html",
        // 限制只能加载某个网站的内容
        "Content-Security-Policy": "default-src https://cdn.jsdelivr.com/; form-action \'self\'",
    });
    res.end(html);
})

``);
    const html = fs.readFileSync("index.html", "utf-8");
    res.writeHead(200, {
        "Content-Type": "text/html",
        // 限制只能加载某个网站的内容
        "Content-Security-Policy": "default-src https://cdn.jsdelivr.com/; form-action \'self\'",
    });
    res.end(html);
})`

自然醒^

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTTP各种特性总览

CORS 跨域请求的限制与解决在返回数据时设置头信息即可，例如：const http = require("http");http.createServer(function (req, res) { res.writeHead(200,{ "Access-Control-Allow-Origin":'*' })}).listen(8888);xxxxxxxxxx const http = require("http");http.createServer(fun
复制链接

扫一扫