CORS是一种常见的跨域机制,一般由服务端提供一个Access-Control-Allow-Origin
头来解决问题,但是这仅对一些“简单请求”有效。那么何谓“简单请求”呢?根据MDN的介绍,一个请求如果同时满足:
- 请求方法为
GET HEAD POST
中任意一种 - 请求头仅包含浏览器(代理)添加的头字段(
User-Agent, Connection
)、描述资源的头字段(Accept, Accept-Encoding, Accept-Language
)等 - 如果请求头有
Content-Type
,其值仅为application/x-www-form-urlencoded
,multipart/form-data
,text/plain
其中之一
那么它就是一个“简单请求”。只要有一条不满足,则不是“简单请求”,在CORS请求时需要先进行预检(preflight)。
预检指的是,浏览器先发一个OPTIONS
请求到服务器,并使用Access-Control-Request-Method
头标识即将发起请求的方法,使用Access-Control-Request-Headers
标识不在上文第2
条标识范围内的头字段名。服务器接收到预检请求之后,需要返回Access-Control-Allow-Origin
、Access-Control-Allow-Methods
标识支持预检的方法,Access-Control-Allow-Headers
标识能够新增的请求字段名,同时返回Access-Control-Max-Age
表明客户端可以缓存预检成功状态多少秒,在有效期内再次发送请求时不需预检。
预检请求成功返回后,浏览器会检验即将发送的请求方法、请求头是否符合服务端需要,如果满足则发送实际的请求,否则会在控制台报一个CORS错误。
下面来模拟一下整个过程:
客户端
客户端代码比较简单,我们构建一个XMLHttpRequest
对象,然后发送一个非"简单请求",代码如下:
var req = new XMLHttpRequest()
req.onreadystatechange = function (e) {
if (req.readyState === 4 && req.status === 200) {
console.log('请求成功')
}
}
req.open('GET', 'http://127.0.0.1:3003/static/pic', true)
req.setRequestHeader('X-Pong', 'ping')
req.send()
我们使用GET
方法,但是新增了X-Pong
头,这不是一个常规的头部,所以浏览器会发预检请求。
服务端
使用koa搭建一个简单的响应服务器
const fs = require('fs')
const path = require('path')
const util = require('util')
const Koa = require('koa2')
const Router = require('koa-router')
const app = new Koa()
const router = new Router()
router
.get('/', (ctx, next) => {
ctx.body = 'index'
})
.options('/static/pic', (ctx, next) => {
let reqMethod = ctx.headers['access-control-request-method']
let origin = ctx.headers['origin'] || '*'
// 打印预检请求头
console.log(util.inspect(ctx.headers))
if (/get/i.test(reqMethod)) {
ctx.set({
// 只支持GET方法
'Access-Control-Allow-Method': 'GET',
// 支持额外的X-Pong头部字段
'Access-Control-Allow-Headers': 'X-Pong',
'Access-Control-Allow-Origin': origin,
// 预检有效缓存10分钟
'Access-Control-Max-Age': '600'
})
ctx.status = 204
} else {
ctx.status = 405
ctx.body = '<p>This resource can only be preflight by GET.</p>'
}
})
.get('/static/pic', (ctx, next) => {
// 这是正常的跨域CORS发送文件
let origin = ctx.headers['origin'] || '*'
let filePath = path.resolve(__dirname, '../mime/pic.jpg')
ctx.set('Access-Control-Allow-Origin', origin)
ctx.type = path.extname(filePath)
ctx.body = fs.createReadStream(filePath)
})
app.use(router.routes())
app.use(router.allowedMethods())
app.listen(3003, function () {
console.log('server running on port 3003...')
})
实验结果
启动服务器,然后在Chrome浏览器的Sources-Snippets面板中运行客户端代码,即可在node控制台看到浏览器发送的预检请求头:
打开浏览器的NetWork面板可以发现请求发送了两次,第一次是OPTIONS预检请求,第二次是GET方法获取图片。通过检视我们发现了预检响应头。
当然这个预检是满足要求的。我们有一些方法使得预检不能被满足:
- 将
Access-Control-Allow-Headers
中的X-Pong
去掉,此时客户端要发送X-Pong
但不被预检允许; - 将
Access-Control-Allow-Method
改成其他方法,此时客户端发送GET请求获取资源不被允许;
这两种情况下浏览器控制台都会报错,感兴趣的不妨试下。
最后Access-Control-Max-Age
表示预检成功结果缓存的时间,它受浏览器缓存控制。如果浏览器运行在disable cache
模式,请求头默认携带cache-control: no-cache
或cache-control: max-age=0
,此时预检缓存也将失效,OPTIONS请求会重新发送。