你不知道的CORS跨域资源共享(2)

CORS非简单请求配置须知

•  正如上图报错显示，，对于非简单请求，浏览器会先发送options预检，预检通过后才会发送真是的请求；
•  发送options预检请求将关于接下来的真实请求的信息给服务器： 

Origin：请求的源域信息  
Access-Control-Request-Method：接下来的请求类型，如POST、GET等  
Access-Control-Request-Headers：接下来的请求中包含的用户显式设置的Header列表 

•  服务器端收到请求之后，会根据附带的信息来判断是否允许该跨域请求，通过Header返回信息： 

Access-Control-Allow-Origin：允许跨域的Origin列表  
Access-Control-Allow-Methods：允许跨域的方法列表  
Access-Control-Allow-Headers：允许跨域的Header列表,防止遗漏Header，因此建议没有特殊需求的情况下设置为*  
Access-Control-Expose-Headers：允许暴露给JavaScript代码的Header列表  
Access-Control-Max-Age：最大的浏览器预检请求缓存时间，单位为s 

CORS完整配置

 1. koa配置CORS跨域资源共享中间件：

const cors = (origin) => {  
    return async (ctx, next) => {  
        ctx.set({  
            "Access-Control-Allow-Origin": origin, //允许的源  
        })  
        // 预检请求  
        if (ctx.request.method == "OPTIONS") {  
            ctx.set({  
                'Access-Control-Allow-Methods': 'OPTIONS,HEAD,DELETE,GET,PUT,POST', //支持跨域的方法  
                'Access-Control-Allow-Headers': '*', //允许的头  
                'Access-Control-Max-Age':10000, // 预检请求缓存时间  
                // 如果服务器设置Access-Control-Allow-Credentials为true，那么就不能再设置Access-Control-Allow-Origin为*,必须用具体的域名  
                'Access-Control-Allow-Credentials':true // 跨域请求携带身份信息(Credential，例如Cookie或者HTTP认证信息)  
            });  
            ctx.send(null, '预检请求')  
        } else {  
            // 真实请求  
            await next()  
        }  
    }  
}  
export default cors 

•  现在不管是简单请求还是非简单请求都可以跨域访问啦～

跨域时如何处理cookie

•  cookie：

      我们知道http时无状态的，所以在维持用户状态时，我们一般会使用cookie；

      cookie每次同源请求都会携带；但是跨域时cookie是不会进行携带发送的；

•  问题：

（编辑：ASP站长网）