再谈CORS

承接上文 HTTP访问控制(CORS)

关于CORS的说明，这篇MDN文章 论述地非常详细、精彩，建议大家先阅读几遍。

知识点

简单请求

1. 只使用GET、HEAD、POST
2. 不使用自定义请求头

预请求

1. GET、HEAD、POST以外的请求，或POST内容不为text/plain,
   application/x-www-form-urlencoded 和 multipart/form-data
   类型
2. 使用自定义请求头

预请求流程：

预请求流程

HTTP响应头

Access-Control-Allow-Origin: http://www.example.com
配置Access-Control-Allow-Origin: *则允许所有域名访问；需要注意的是，该头部是无法配置多个域名的，因此需通过nginx或者程序控制。

Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header
设置允许浏览器访问的响应头白名单。

Access-Control-Max-Age: 100
设置预请求缓存时间（单位秒）。预请求会导致2次请求roundtrip，是会影响服务性能的。

Access-Control-Allow-Credentials: true
原文的解释有点绕，通俗点讲，就是与客户端xhr.withCredentials = true配套使用，用来传递cookie的。

Access-Control-Allow-Methods: GET, HEAD, POST, PUT, DELETE, OPTIONS
由于rest接口通常会有PUT | DELETE等操作，所以导致该响应头也成为标配。

Access-Control-Allow-Headers: X-PINGOTHER, X-HEADER
预请求中告诉浏览器可以使用哪些自定义头部。

HTTP请求头

1. Origin
2. Access-Control-Request-Method
3. Access-Control-Request-Headers（请求中会使用的自定义HTTP头）

请求头比较简单，不赘述。

开工撸代码

  // 客户端请求时，记得设置 xhr.withCredentials = true
  // express中间件
  app.use(function(req, res, next) {
    res.header('Access-Control-Allow-Origin', 'http://www.example.com');
    res.header('Access-Control-Allow-Credentials', 'true');
    res.header('Access-Control-Allow-Methods', 'GET, HEAD, POST, PUT, DELETE, OPTIONS');

    next();
  });