axios optons请求的坑-优快云博客

浏览器跨域访问服务端时会进行预检，检查允许的方法、Origin和Credentials。axios的POST请求默认采用非简单请求的application/json编码，可修改为'application/x-www-form-urlencoded; charset=UTF-8'以避免预检，但可能引发数据不一致问题。简单请求需满足特定条件，包括请求方式、HTTP请求头和Content-type。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

出于安全考虑，并不是所有域名访问后端服务都可以。其实在正式跨域之前，浏览器会根据需要发起一次预检（也就是option请求），用来让服务端返回允许的方法（如get、post），被跨域访问的Origin（来源或者域），还有是否需要Credentials(认证信息)等。那么浏览器在什么情况下能预检呢？

两种请求方式

浏览器将CORS请求分为两类：简单请求（simple request）和非简单请求（not-simple-request）,简单请求浏览器不会预检，而非简单请求会预检。

延伸：
post提交数据的四种编码方式
1.application/x-www-form-urlencoded
这应该是最常见的post编码方式，一般的表单提交默认以此方式提交。大部分服务器语言对这种方式都有很好的支持。在PHP中，可以用$_POST[“key”]的方式获取到key的值。
2.multipart/form-data
这也是一种比较常见的post数据格式，我们用表单上传文件时，必须使form表单的enctype属性或者ajax的contentType参数等于multipart/form-data。
3.application/json
axios默认提交就是使用这种格式。如果使用这种编码方式，那么传递到后台的将是序列化后的json字符。
4.text/xml 串。

这两种方式怎么区分？

同时满足下列三大条件，就属于简单请求，否则属于非简单请求
1.请求方式只能是：GET、POST、HEAD
2.HTTP请求头限制这几种字段：Accept、Accept-Language、Content-Language、Content-Type、Last-Event-ID
3.Content-type只能取：application/x-www-form-urlencoded、multipart/form-data、text/plain

axios post方法Content-type默认使用application/json格式编码数据，属于非简单请求，将axios post方法的编码格式修改为‘application/x-www-form-urlencoded; charset=UTF-8’，修改Content-type：

headers:{
      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
  },

会出现传输数据不一致，可在数据发送前修改发送数据（transformRequest）或者使用qs依赖：

import axios from 'axios'
//qs依赖
import qs from 'qs'
axios
 ({
       headers:{
           'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
       },
       baseURL: 'https://api.xiepinhui.com.cn',
       url: '/website/leave_message', 
       method: 'post',
       //qs依赖转换数据
       data: qs.stringify(data)
       //transformRequest(axios自带的属性)
       // transformRequest: [function (data) {
       //     console.log(data)
       //     let ret = ''
       //     for (let it in data) {
       //         ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
       //     }
       //     return ret
       // }]
   })