CORS预检

CORS是一种常见的跨域机制，一般由服务端提供一个Access-Control-Allow-Origin头来解决问题，但是这仅对一些“简单请求”有效。那么何谓“简单请求”呢？根据MDN的介绍，一个请求如果同时满足：

1. 请求方法为GET HEAD POST中任意一种
2. 请求头仅包含浏览器（代理）添加的头字段（User-Agent, Connection）、描述资源的头字段（Accept, Accept-Encoding, Accept-Language）等
3. 如果请求头有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方法获取图片。通过检视我们发现了预检响应头。



当然这个预检是满足要求的。我们有一些方法使得预检不能被满足：

1. 将Access-Control-Allow-Headers中的X-Pong去掉，此时客户端要发送X-Pong但不被预检允许；
2. 将Access-Control-Allow-Method改成其他方法，此时客户端发送GET请求获取资源不被允许；

这两种情况下浏览器控制台都会报错，感兴趣的不妨试下。

最后Access-Control-Max-Age表示预检成功结果缓存的时间，它受浏览器缓存控制。如果浏览器运行在disable cache模式，请求头默认携带cache-control: no-cache或cache-control: max-age=0，此时预检缓存也将失效，OPTIONS请求会重新发送。