CORS跨域与Express实现

CORS跨域与Express实现

浏览器跨域问题不用多说，CORS是一个很好的解决办法，浏览器自动实现（IE10+）。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

// 手动书写
let corsWhiteList = ['http://localhost:3001', 'http://localhost:3002']
app.use('*', function (req, res, next) {
    let origin = req.header('Origin')
    if (corsWhiteList.indexOf(origin) == -1) { // 不在白名单列表中。如果全开放的话，将此判断取消即可，设置为“*”是无用的
        origin = ''
    }
    res.header('Access-Control-Allow-Origin', origin)
    res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With, yourHeaderFeild')
    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS') //设置方法
    res.header('Access-Control-Allow-Credentials', true)
    if (req.method == 'OPTIONS') {
    res.send(200) // 意思是，在正常的请求之前，会发送一个验证，是否可以请求，非正常简单请求会先发起option询问。
    } else {
    next()
    }
})

// 使用cors中间件，cors中间件的使用与配置见其官方文档
let corsWhiteList = ['http://localhost:3001', 'http://localhost:3002']
let corsOptions = {
  origin: function (origin, callback) {
    if (corsWhiteList.indexOf(origin) !== -1 || !origin) { // 本机请求未跨域origin不存在
      callback(null, true)
    } else {
      callback(new Error('Not allowed by CORS'))
    }
  },
  credentials: true
}
app.use(cors(corsOptions))

THE END!