HTTP 各种特性应用(一)
一、 CORS 预请求
允许方法:
GET、 HEAD、 POST 这三个方法 不需要预请求。
允许 Content-Type
text/plain、 multipart/form-data、 application/x-www-form-urlencoded 这三个不需要预请求
其他限制
请求头限制、 XMLHttpRequestUpload 对象均没有注册任何事件监听器
请求中没有使用 ReadableStream 对象
server.js 代码
const http = require('http')
const fs = require('fs') http.createServer(function (request, response) {
console.log('request come', request.url) const html = fs.readFileSync('test.html', 'utf8')
response.writeHead(, {
'Content-Type': 'text/html'
})
response.end(html)
}).listen() console.log('server listening on 8888')
server2.js 代码
const http = require('http') http.createServer(function (request, response) {
console.log('request come', request.url) response.writeHead(, {
'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': '' //多长事件内不需要预请求来验证
})
response.end('')
}).listen() console.log('server listening on 8887')
test.html 代码
<!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>
<!-- cors1 -->
<!-- <script>
var xhr = new XMLHttpRequest()
xhr.open('GET', 'http://127.0.0.1:8887/')
xhr.send()
</script> -->
<script>
fetch('http://localhost:8887', {
method: 'POST',
headers: {
'X-Test-Cors': '123'
}
})
</script>
</html>
用nodejs 去运行 server.js 和 server2.js
node server.js
node server2.js
结果:
二、 缓存头 Cache-Control 的含义和使用
缓存 Cache-Control
可缓存性
public:表示(发送,请求,以及中间代理)任何地方 都可以对我返回内容的缓存的操控。
private:表示 只有发起请求的浏览器 才可以进行缓存。
no-cache:任何一个节点 都不可以缓存(你可以去缓存,但是你需要去服务器去验证一下。才可以使用本地的缓存。)
到期
max-age = <seconds> : 多少秒以后 缓存过期。
s-maxage = <seconds> :代理服务器 会优先选择这个 到期的时间。
max-stale = <seconds> : 在这个时间内, 即使缓存过期了,也会使用这个过期的缓存。
重新验证
must-revalidate :重新去服务器获取数据 验证缓存是否到期。而不能直接使用本地的缓存。
proxy-revalidate:代理缓存服务器重新去获取数据验证魂村是否到期,而不能直接使用本地缓存。
其他
no-store:本地和代理服务器 都不可以存缓存。
no-traansform:告诉代理服务器不要随便改动 请求返回的内容。
server.js 代码
const http = require('http')
const fs = require('fs') http.createServer(function (request, response) {
console.log('request come', request.url) if (request.url === '/') {
const html = fs.readFileSync('test.html', 'utf8')
response.writeHead(, {
'Content-Type': 'text/html'
})
response.end(html)
} if (request.url === '/script.js') {
response.writeHead(, {
'Content-Type': 'text/javascript',
'Cache-Control': 'max-age=20'
})
response.end('console.log("script loaded")')
}
}).listen() console.log('server listening on 8888')
test.html 代码
<!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>
<script src="/script.js"></script>
</html>
第一次访问返回结果:
在到期缓存时间之内再一次访问:
三、缓存验证 Last-Modified 和 Etag 的使用
资源验证
验证头
Last-Modified:上次修改时间
配合if-Modified-Since 或者 if-Unmodified-Since 使用,对比上次修改时间来验证资源是否需要更新。
Etag:数据签名
配合if-Match 或者 if-Non-Match 使用,对比资源的签名判断是否使用缓存。
server.js 代码
const http = require('http')
const fs = require('fs') http.createServer(function (request, response) {
console.log('request come', request.url) if (request.url === '/') {
const html = fs.readFileSync('test.html', 'utf8')
response.writeHead(, {
'Content-Type': 'text/html'
})
response.end(html)
} if (request.url === '/script.js') { const etag = request.headers['if-none-match']
if (etag === '') {
response.writeHead(, { //状态码304 表示资源没有被修改可以用本地缓存
'Content-Type': 'text/javascript',
'Cache-Control': 'max-age=2000000, no-cache',
'Last-Modified': '',
'Etag': ''
})
response.end()
} else {
response.writeHead(, {
'Content-Type': 'text/javascript',
'Cache-Control': 'max-age=2000000, no-cache',
'Last-Modified': '',
'Etag': ''
})
response.end('console.log("script loaded twice")')
}
}
}).listen() console.log('server listening on 8888')
test.html 代码
<!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>
<script src="/script.js"></script>
</html>
第一次发送请求结果:
第二次发送请求结果:
总结:第一次发送请求时候,响应头返回服务器的数字签名 Etag,浏览器存入缓存头if-None-Match中,第二次发送请求的时候,服务器验证if-None-Match 与 服务器的 Etag 是否一致,一致使用浏览器本地的缓存,不一致则使用从服务器重新返回新数据。
HTTP 各种特性应用(一)的更多相关文章
- Fis3的前端工程化之路[三大特性篇之声明依赖]
Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...
- Fis3的前端工程化之路[三大特性篇之资源定位]
Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...
- Fis3的前端工程化之路[三大特性篇之内容嵌入]
Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...
- .NET 4.6.2正式发布带来众多特性
虽然大多数人的注意力都集中在.NET Core上,但与原来的.NET Framework相关的工作还在继续..NET Framework 4.6.2正式版已于近日发布,其重点是安全和WinForms/ ...
- SQL Server 2014 新特性——内存数据库
SQL Server 2014 新特性——内存数据库 目录 SQL Server 2014 新特性——内存数据库 简介: 设计目的和原因: 专业名词 In-Memory OLTP不同之处 内存优化表 ...
- 探索ASP.NET MVC5系列之~~~4.模型篇---包含模型常用特性和过度提交防御
其实任何资料里面的任何知识点都无所谓,都是不重要的,重要的是学习方法,自行摸索的过程(不妥之处欢迎指正) 汇总:http://www.cnblogs.com/dunitian/p/4822808.ht ...
- InnoDB关键特性学习笔记
插入缓存 Insert Buffer Insert Buffer是InnoDB存储引擎关键特性中最令人激动与兴奋的一个功能.不过这个名字可能会让人认为插入缓冲是缓冲池中的一个组成部分.其实不然,Inn ...
- ElasticSearch 5学习(10)——结构化查询(包括新特性)
之前我们所有的查询都属于命令行查询,但是不利于复杂的查询,而且一般在项目开发中不使用命令行查询方式,只有在调试测试时使用简单命令行查询,但是,如果想要善用搜索,我们必须使用请求体查询(request ...
- HTML5新特性有哪些,你都知道吗
一.画布(Canvas) 画布是网页中的一块区域,可所以用JavaScript在上面绘图.下面我们来创建一个画布并在上面绘制一个坦克(后面将用HTML5做一个坦克大战游戏),代码如下: <!DO ...
- C++11特性——变量部分(using类型别名、constexpr常量表达式、auto类型推断、nullptr空指针等)
#include <iostream> using namespace std; int main() { using cullptr = const unsigned long long ...
随机推荐
- 【Henu ACM Round#24 E】Connected Components
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 要求把连续的一段li..ri的边全都删掉. 然后求剩下的图的联通数 如果暴力的话 复杂度显然是O(k*m)级别的. 考虑我们把li. ...
- C++容器(五):set类型
set类型 map容器是键-值对的集合,好比以任命为键的地址和电话号码.而set容器只是单纯的键的集合.当只想知道一个值是否存在时,使用set容器是最适合. 使用set容器必须包含set头文件: #i ...
- blog_html
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html b:v ...
- thinkphp5项目--个人博客(八)
thinkphp5项目--个人博客(八) 项目地址 fry404006308/personalBlog: personalBloghttps://github.com/fry404006308/per ...
- MinGW - 安装和配置 / MinGW - Howto Install And Configure
MinGW在线安装程序下载地址:http://sourceforge.net/projects/mingw/files/Automated%20MinGW%20Installer/mingw-get- ...
- springboot 静态方法注入bean、使用@value给static变量赋值
首先新建你的方法类:DemoUtil 头部加注解:@Component @Component public class DemoUtil { } 新增静态变量: static DemoService ...
- atom玩法
1.先用 git 下载一个 react-devtools: $ cd /some-directory$ git clone --recursive https://github.com/faceboo ...
- 当fastJson邂逅大写字段时
在项目中遇到了一件令人头疼的事.使用fastJson反序列化时下面的Json时,得到对象属性总为null(如下图),可能细心的朋友一看就知道问题出在哪里,没错!问题就出在返回的字段首字母给大写了.fa ...
- 用LinkedList模拟Stack功能
集合体系在Java中比较重要,整个集合体系是在JDK1.2版本后出现,Collection作为整个体系的顶层,拥有整个体系通用的功能.对于其下面的小弟,也是各有千秋.下面就一道面试题来看看Linked ...
- javascript 优秀写法
http://www.csdn.net/article/2014-01-06/2818025-Useful-JavaScript-Tips-Best-Practices