关于post请求产生的preflight request小记
首先感谢几篇文章的大佬，学习到很多
- 记一次跨域post请求数据之preflight request
- 跨域请求出现preflight request失败的问题的解决
- 为什么axios先请求options在请求post及解决方法
以上文中，大佬们已经总结了很多也很详细，以下是个人的一些小结
一、问题背景
本地启动的前端vue项目使用axios发送post请求去获取一个展示列表，对于可能会产生的跨域请求后端项目中已经配置了如下
|
1 2 3 4 |
response.setHeader("Access-Control-Allow-Origin",request.getHeader("Origin")); response.setHeader("Access-Control-Allow-Methods", "*"); response.setHeader("Access-Control-Allow-Credentials", "true"); response.setHeader("Access-Control-Allow-Headers", "Authorization,Origin, X-Requested-With, Content-Type, Accept,Access-Token"); |
前端请求为
|
1 2 3 4 5 6 7 |
axios.post(myUrl, { token: myToken, }).then( res => { // do sth success }).catch( err => { // do sth error }) |
然后浏览器控制台显示为
二、初步分析
首先看到报错中最熟悉的关键字CORS，初步判定是跨域问题，但后端已经配置了处理跨域，所以需要把跨域问题排除掉，接着看报错的文字Redirect is not allowed for a preflight request.，其中有个关键字应该是preflight request，普通的跨域报错好像没有这个，接下来就可以去看文章开头大佬们的解析了，分析前首先也要明确几点：
- axios使用post请求时，会默认先发送一个option请求
- axios使用post请求时，默认的Content-Type是application/json
- 使用FormData格式的参数作为post请求的参数时，不会出现跨域问题和preflight request报错
2.1 请求类别
- 简单请求
- 非简单请求
2.1.1简单请求
满足以下两个条件
- 请求方法是以下三种方法之一:
- HEAD
- GET
- POST
- Content-Type: (仅当POST方法的Content-Type值等于下列之一才算做简单需求)
- text/plain
- multipart/form-data
- application/x-www-form-urlencoded
对于简单请求，浏览器直接发出CORS请求。
- Access-Control-Allow-Origin: 该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。
- Access-Control-Allow-Credentials: 该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。
- Access-Control-Expose-Headers: 该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。
2.1.2非简单请求
- 请求方法不是GET/HEAD/POST
- POST请求的Content-Type并非application/x-www-form-urlencoded, multipart/form-data, 或text/plain
- 请求设置了自定义的header字段
- 非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json
- 非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）
- "预检"请求用的请求方法是OPTIONS，表示这个请求是用来询问的。头信息里面，关键字段是Origin，表示请求来自哪个源
- 浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错
- 除了Origin字段，"预检"请求的头信息包括两个特殊字段：
- Access-Control-Request-Method：该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法
- Access-Control-Request-Headers：该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段
2.1.3为什么要发预检请求
preflight request是为确保服务器是否允许发起对服务器数据产生副作用的HTTP请求方法，而预先由浏览器发起OPTIONS方法的一个预检请求，如果允许就发送真实的请求，如果不允许则直接拒绝发起真实请求。
三、问题回溯
- 使用axios的post请求，且Content-Type默认是application/json格式
- 由于是非简单请求，所以浏览器会先发一个option请求，虽然后端已设置解决跨域，但出现preflight request报错
四、尝试解决
4.1 方法一
在发送axios发送post请求时，配置header属性
|
1 2 3 4 5 6 7 8 9 10 11 |
axios({ method: 'post', url: myUrl, params: { token: myToken, }, header: { 'Content-Type': 'application/x-www-form-urlencoded', } }) // 我自己本地测试，改成这样后，已经可以正常获取接口数据了 |
4.2 方法二
使用FormData参数格式 + axios的data字段
|
1 2 3 4 5 6 7 |
let formData = new FormData(); formData.append('token', myToken); axios({ method: 'post', url: myUrl, data: formData, }) |
使用formData发送请求时，axios不会预先发送option请求，直接只有一个post请求
4.3 方法三
使用axios的params字段
|
1 2 3 4 5 6 7 |
axios({ method: 'post', url: myUrl, params: { token: myToken, }, }) |
使用params字段发送请求时，axios不会预先发送option请求，直接只有一个post请求
标签：axios,请求,request,Access,preflight,post From： https://www.cnblogs.com/thinkingthigh/p/16739065.html
补充：如果axios用post请求且直接使用data字段，浏览器会报preflight request错误，而且浏览器会先发送一个option请求