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' )
1234567
CORS跨域限制以及预请求验证
允许方法
- GET
- HEAD
- POST
允许Content-Type
- text/ plain
- multipart/form-data
- application/x-www-form-urlencoded
其他限制
- [请求头限制](https://fetch.spec.whatwg.org/#cors safelisted- request-header)
- 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' )
12345678910111213
缓存头Cache-Control的含义和使用
可缓存性
- public
- 任何代理服务器都可以对数据进行缓存
- private
- 只有发起请求的浏览器可以缓存
- no-cache
- 任何一个节点都不可以缓存
到期
- max-age=
- 设置时间过期,过期后再次发送请求到服务器请求信内容
- s-maxage=
- 在代理服务器里才生效
- max-stale=
- 在max-stale时间内,即使max-age时间过期,也可以使用(
浏览器用不到
)
- 在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' )
1234567
刷新缓存:可以文件名后加入根据内容生成的哈希码。
重新验证
- 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")' )
}
}
12345678910111213141516171819202122
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' )
12345678
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' )
123456789
数据协商
分类
- 请求(客户端)
- Accept
- 明确想要接收数据的类型
- Accept-Encoding
- 明确编码方式,限制服务端压缩方式
- Accept-Language
- 返回信息判断是中文还是英文
- User-Agent
- 判断浏览器相关信息
- Accept
- 返回(服务端)
- Content-Type
- 选择一种数据格式,作为真正返回的数据格式进行返回(申明)
- Content-Encoding
- 对应Accept-Encoding
- Content-Language
- 对应Accept-Language
- Content-Type
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' )
12345678
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");
1234567891011121314151617
CSP
全称Content-Security-Policy
,意为内容安全策略
作用
- 限制资源获取
- 报告资源获取越权
限制方式
- default-src限制全局
- 指定资源类型
- connect-src
- 请求发向的目标的限制
- font-src
- 策略可以包含一个或多个源
- frame-src
- 可以允许一个或多个源
- media-src
- 可以允许一个或多个源
- manifest-src
- 可以允许一个或多个源
- img-src
- 图片可以从哪些网址上加载
- style-src
- 样式和脚本的资源从哪些网址上加载
- script-src
- 样式和脚本的资源从哪些网址上加载
- connect-src
实例
-
只能限制去加载我们本站提供的外链的脚本
"Content-Security-Policy": "default-src default-src\'self\' " 1
-
只能限制加载某个网站的内容
"Content-Security-Policy": "default-src default-src\'self\' https://www.baidu.com" 1
-
只能限制表单
"Content-Security-Policy": "default-src \'self\'; form-action \'self\'"