爱总结，爱搬砖，爱生活

引言

前不久用Vue和node搭建个人博客，用Axios做网络请求，在做博主登录验证的时候总是会发送两条相同的请求，其中一条的请求方式为OPTION，然后看了几篇博客，基本提到的是跨域、浏览器预校验、简单请求、复杂请求，下面围绕OPTION总结一下。

心得

OPTION请求是浏览器为确定跨域请求资源的安全做的预请求，解决OPTION请求有两种方式第一种是使用简单请求，第二种是设置浏览器预校验请求失效时间。

案例引入

• 模仿登录请求写了一个简单的案例，下面给出会发送OPTION请求的代码（极简单的案例只为突出解决OPTION请求的问题，其他问题不是本篇博客的范畴）
  node代码

const express = require('express')
const jwt = require('jsonwebtoken');

const app = express()
const port = 3000

// 解决跨域问题
app.all('*', function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*")
  res.header("Access-Control-Allow-Headers", "X-Requested-With, accept, origin, content-type, Authorization")
  res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS")
  res.header("X-Powered-By", ' 3.2.1')
  next()
})

app.get('/', (req, res) => {
  const token = jwt.sign({ foo: 'bar' }, 'shhhhh')
  res.send(token)
})

app.post('/login', (req, res) => {
  const token = req.headers.authorization
  let result
  jwt.verify(token, 'shhhhh', function(err, decoded) {
    if (err) {
      console.log(err);
      res.send(500)
    } else {
      result = 'success'
      res.send(result)
    }
  });
  
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

Vue代码

<template>
  <div id="app">
    <button @click="login">点击</button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'App',
  data(){
    return {
      token: ''
    }
  },
  mounted() {
    axios.get('http://localhost:3000/').then(data => {
      this.token = data.data
    })
  },
  methods: {
    login() {
      axios.request({
        url: 'http://localhost:3000/login',
        method: 'post',
        headers: {
          'Authorization': this.token
        }
      }).then(data => {
        console.log(data);
      })
    }
  }
}
</script>

<style scoped>

</style>

• 上面的代码在执行login事件函数时每次都会向服务器发送两次同样的请求，其中一次就是本篇博客的主角OPTION请求，接下来是针对OPTION请求的一番探究。

什么时OPTION请求

• 跨域请求资源时浏览器为确认请求来源的安全性，会在正式的请求之前做一次预校验请求，待服务器允许之后才能发送正式的请求，这个预校验请求就是OPTION请求；
• 并不是每次跨域资源请求都会发送OPTION请求，当跨域请求为简单请求的时就不会发送预校验请求，当跨域请求为复杂请求时才会发送预校验请求；
• 跨域请求就不再做详细的阐述，来看一下什么是简单请求和复杂请求。

简单请求和复杂请求

• 先看什么是简单请求，不满足简单请求的就是复杂请求

• 有些请求不会触发CORS的预检。尽管Fetch规范（定义了 CORS）没有使用该术语，但在本文中将这些称为“简单请求”。“简单请求”是满足以下所有条件的请求：
  允许的方法之一：
  • GET
  • HEAD
  • POST
• WSS除了由用户代理自动设置的标头（例如，Connection，User-Agent，或在定义的其它标题抓取规格为“禁止的标题名称”），其允许被手动设置仅标头是那些抓取规范定义为“ CORS安全列出的请求标头”，它们是：
  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type （但请注意下面的其他要求）
• Content-Type标头唯一允许的值为：
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
• 没有在事件中使用的任何XMLHttpRequest.upload对象上注册事件侦听器；使用XMLHttpRequest.upload属性访问这些。
• ReadableStream请求中未使用任何对象。

• 上面这段内容摘自CND跨域资源共享（CORS）,这篇文章值得多读几遍；
• 对比简单请求，可想而知什么是复杂请求；
• 回过头去看一下博客开头的引入案例，在登录请求中将token携带在请求头中，显然这个请求不再是跨域简单请求，因此在正式的登录请求之前会发送OPTION请求，获得‘批准’之后才会发送正式的登录请求；

OPTION请求好吗？

OPTION请求是浏览器的一种安全策略，当然好，但是过多的OPTION请求会占用浏览器的资源，影响页面的性能，所以要尽可能的减少OPTION请求。

怎么解决OPTION请求的问题

• 解决OPTION请求有两条思路
  1. 不使用复杂请求
  2. 给浏览器的预校验设置失效时间
• OPTION请求只有在跨域复杂请求的时候才会有，所以就有了第一种解决思路，不要使用复杂请求，取而代之的是使用简单请求；
• 第二种思路是给浏览器设置预校验失效时间，通过在服务端设置请求头Access-Control-Max-Age，下面贴出具体的代码；
  node代码

// 解决跨域问题
app.all('*', function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*")
  res.header("Access-Control-Allow-Headers", "X-Requested-With, accept, origin, content-type, Authorization")
  res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS")
  // 下面代码设值了浏览器预校验请求的失效时间为60s
  res.header("Access-Control-Max-Age", 60)
  res.header("X-Powered-By", ' 3.2.1')
  next()
})

关于Access-Control-Max-Age

案例代码

爱总结，爱搬砖，爱生活

跨域中option请求详解
在正式跨域的请求前，浏览器会根据需要，发起一个“PreFlight”（也就是Option请求），用来让服务端返回允许的方法（如get、post），被跨域访问的Origin（来源，或者域），还有是否需要Credentials(认证信息）

三种场景：

1. 如果跨域的请求是Simple Request（简单请求 ），则不会触发“PreFlight”。Mozilla对于简单请求的要求是：
   以下三项必须都成立：
2. 只能是Get、Head、Post方法
3. 除了浏览器自己在Http头上加的信息（如Connection、User-Agent），开发者只能加这几个：Accept、Accept-Language、Content-Type、。。。。
4. Content-Type只能取这几个值：
   application/x-www-form-urlencoded
   multipart/form-data
   text/plain
   一、为什么会出现options请求呢？

跨域请求中，options请求是浏览器自发起的preflight request(预检请求)，以检测实际请求是否可以被浏览器接受。

preflight request请求报文中有两个需要关注的首部字段：

（1）Access-Control-Request-Method：告知服务器实际请求所使用的HTTP方法；

（2）Access-Control-Request-Headers：告知服务器实际请求所携带的自定义首部字段。

同时服务器也会添加origin header,告知服务器实际请求的客户端的地址。服务器基于从预检请求获得的信息来判断，是否接受接下来的实际请求。

服务器所返回的Access-Control-Allow-Methods首部字段将所有允许的请求方法告知客户端，返回将所有Access-Control-Request-Headers首部字段将所有允许的自定义首部字段告知客户端。此外，服务器端可返回Access-Control-Max-Age首部字段，允许浏览器在指定时间内，无需再发送预检请求，直接用本次结果即可。

在我们开发过程中出现的浏览器自发起的options请求就是上面的第二种情况。实际上，跨域请求中的”复杂请求”发出前会进行一次方法是options的preflight request。

二、当跨域请求是简单请求时不会进行preflight request,只有复杂请求才会进行preflight request。

跨域请求分两种：简单请求、复杂请求；

符合以下任一情况的就是复杂请求：

1.使用方法put或者delete;

2.发送json格式的数据（content-type: application/json）

3.请求中带有自定义头部；

除了满足以上条件的复杂请求其他的就是简单请求喽！

三、为什么跨域的复杂请求需要preflight request？

复杂请求可能对服务器数据产生副作用。例如delete或者put,都会对服务器数据进行修改,所以在请求之前都要先询问服务器，当前网页所在域名是否在服务器的许可名单中，服务器允许后，浏览器才会发出正式的请求，否则不发送正式请求。

后端服务框架 SpringBoot

如果请求 method 的是 option 会导致 HttpServletRequest 读取不到请求内容。

axios 的 option 请求目的是确认后端服务是否允许跨站请求，因此后端这边特殊处理一下
option 请求即可

在 filter 中如果遇到 option 请求直接返回

public class SecretFilter extends OncePerRequestFilter {

    String defaultRsp = "{}";

    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
        boolean secret = String.valueOf(1).equals(request.getHeader("fu-secret"));
        if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
            response.getOutputStream().write(defaultRsp.getBytes(StandardCharsets.UTF_8));
            response.setStatus(HttpStatus.OK.value());
            response.addHeader("Access-Control-Allow-Origin", "*");
            response.addHeader("Access-Control-Allow-Methods", "POST,GET,OPTIONS,PUT,DELETE");
            response.setHeader("Access-Control-Allow-Headers", "*");
            return;
        }
        String body = IoUtil.readString(request.getInputStream());
        try {
            filterChain.doFilter(new FuminoRequestWrapper(request, body), response);
        } finally {
            response.addHeader("Access-Control-Allow-Origin", "*");
            response.addHeader("Access-Control-Allow-Methods", "POST,GET,OPTIONS,PUT,DELETE");
            response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization，Content-Type");
        }
    }