HTTP跨域时为何要发送options请求？

1. 什么是跨域？

• 浏览器同源策略，默认限制跨域请求
• 同源策略一般限制 Ajax 网络请求， 不能跨域请求 sever
• 但是不会限制 <link> <img> <script> <iframe> 加载第三方资源

1.1 怎么样解决跨越(常用办法)

都需要后端配合

• jsonp

<!-- www.aaa.com 网页 -->
<script>
    window.onSuccess = function(data) {
        console.log(data)
    }
</script>
<script src="https://www.bbb.com/api/getData"></script>

// https://www.bbb.com/api/getData 返回一段字符串
'onSuccess({ code:200, data: {/*数据内容*/} })'

• CORS 目前大部分解决跨域的方案

// CORS 配置允许跨域（服务端）
response.setHeader("Access-Control-Allow-Origin", "http://localhost:8011") // 或者 '*'
response.setHeader("Access-Control-Allow-Headers", "X-Requested-With")
response.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS")
response.setHeader("Access-Control-Allow-Credentials", "true") // 允许跨域接收 cookie

2. options 请求

使用cors跨域请求时，经常会看到一个“多余”的 options 请求， 之后才会发送实际的请求

该请求是为了检查服务端的 headers 信息， 是否符合客户端的预期，所以它没有 body 的返回

规范要求， 对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是GET以外的HTTP请求，或者搭配某些MIME类型的POST请求），浏览器必须首先使用OPTIONS方法发起一个预检请求(preflight request)，从而获知服务器是否允许跨域请求。

options请求就是对CORS跨域请求之间的一次预检查，检查成功再发起正式请求，是浏览器自行处理的