为何 axios 发两次请求 xhr preflight
在使用axios发送跨域请求时，我们有时会发现axios会发起两次请求，第一次是OPTIONS请求，第二次才是我们实际想要发送的请求。这种现象称为"xhr preflight"，那么这种现象为什么会发生呢？本文将为大家详细解释这个问题。
什么是xhr preflight
xhr preflight是跨域请求时的一种预检请求机制，用于检查实际请求是否安全。在发送跨域请求时，浏览器会先发送一个OPTIONS请求给服务器端，服务器端会在响应中告诉浏览器是否允许发送实际的请求。如果服务器端返回了允许实际请求的响应，浏览器才会发送实际的请求。
为什么发生xhr preflight
xhr preflight的发生是由于浏览器的同源策略所导致的。同源策略限制了不同源之间的交互，跨域请求在没有特殊处理的情况下是不被允许的。而对于一些特殊的请求，比如跨域的复杂请求（如带有自定义Header的请求、带有cookie的请求等），浏览器为了保证安全性会先发送一个OPTIONS请求进行预检。
axios 引发xhr preflight
在使用axios发送跨域请求时，如果请求符合复杂请求的条件，浏览器会自动发起xhr preflight预检请求。比如以下代码中的例子：
axios({
method: 'post',
url: '
headers: {
'Content-Type': 'application/json'
},
data: {
name: 'Alice'
}
})
在这个例子中，我们发送了一个POST请求给'example.com'，并且设置了自定义的Content-Type。这种情况下，浏览器会先发送一个OPTIONS请求给服务器端，询问是否允许实际的POST请求。
如何避免xhr preflight
为了避免xhr preflight的发生，我们可以在发送请求时配置axios的headers，明确告诉服务器端请求的内容类型。比如：
axios({
method: 'post',
url: '
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*'
},
data: {
name: 'Alice'
}
})
在这个例子中，我们显式地设置了Content-Type和Access-Control-Allow-Origin这两个header，告诉服务器端我们发送的是一个JSON格式的请求，同时也明确了跨域请求的允许范围。这样一来，浏览器就不会再进行xhr preflight了。
总结
xhr preflight是浏览器为了保护用户信息安全而设置的一种预检请求机制，用于检查跨域请求的合法性。axios在发送跨域请求时，如果请求符合复杂请求的条件，浏览器会发起xhr preflight。为了避免xhr preflight的发生，我们可以在发送请求时明确告诉服务器端请求的内容类型和跨域请求的允许范围。
通过本文的解释，相信大家对axios发送两次请求xhr preflight的原因有了更深入的了解。在实际开发中，合理设置请求头，遵循同源策略，可以更好地处理跨域请求，提升系统的安全性和性能。
类图
下面是本文中提到的axios类的类图：
classDiagram
class Axios {
- defaults
- request(config)
- get(url, config)
- post(url, data, config)
- put(url, data, config)
- delete(url, config)
}
在类图中，我们可以看到Axios类的结构，其中包括了一些常用的请求方法以及请求的默认配置。
通过本文的科普，希望读者能更好地了解axios发两次请求xhr preflight的原因，以及如何避
