在正式的跨域请求之前,我们能在控制台上看到先发送了一个 OPTIONS 请求去询问服务器是否允许接下来的跨域请求,那么有关于这个 OPTIONS,今天就来介绍一下。
在 OPTIONS 请求里有几个字段:
- Origin:发起请求原来的域
- Access-Control-Request-Method:将要发起的跨域请求方式(GET/PUT/POST/DELETE/······)
- Access-Control-Request-Headers:将要发起的跨域请求中包含的请求头字段
- Access-Control-Max-Age:缓存查询结果时间。
服务器在响应字段中来表明是否允许这个跨域请求,浏览器收到后检查如果不符合要求,就拒绝后面的请求
- Access-Control-Allow-Origin:允许哪些域来访问(*表示允许所有域的请求)
- Access-Control-Allow-Methods:允许哪些请求方式
- Access-Control-Allow-Headers:允许哪些请求头字段
- Access-Control-Allow-Credentials:是否允许携带Cookie
为了避免每次都要询问,OPTIONS 还做了两个重要的优化
第一,如果是一个简单请求,那就直接发起请求,只需在请求中加入 Origin 字段表明自己来源,在响应中检查 Access-Control-Allow-Origin,如果不符合要求就报错,不需要再单独询问
那简单请求又是什么?
简单请求就是请求方式属于HEAD、GET、POST三者之一,请求头只有下面这些,不符合要求的就是非简单请求,就得询问了
- Accept
- Accept-Language
- Content-Language
- Last-Event-ID
- Content-Type:(application/x-www-form-urlencoded、multipart/form-data、text/plain)
第二个优化是,Options 请求头的 Access-Control-Max-Age,它表明了这个询问结果的有效期,后面浏览器在有效期内也可以不必再次询问
参考
推荐这家的文章,虽然有标题党嫌疑,但讲的的确是通俗易懂。