Axios PUT请求异常：缺失指定Content-Type触发OPTIONS请求

我来帮你搞定这个问题！你遇到的情况很典型：POST请求能正常携带application/x-www-form-urlencoded的Content-Type，但PUT请求却丢失了这个头，导致浏览器触发了OPTIONS预检请求，最终请求无法正常工作。

问题根源分析 #

虽然你在创建Axios实例时已经全局设置了Content-Type，但可能因为Axios的默认行为，PUT请求并没有正确继承这个全局headers配置。另外，当你用qs.stringify()把数据转成urlencoded格式后，如果没有明确指定Content-Type，Axios可能会自动将请求头设置为text/plain，这就会触发浏览器的CORS预检机制。

解决方案 #

这里有两种可靠的修复方式，你可以根据自己的需求选择：

方案1：在PUT方法中显式指定请求头

直接在PUT请求里手动添加Content-Type，确保它不会丢失：

function put (url, putData) {
  return instance.put(url, qs.stringify(putData), {
    headers: {
      'content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
    }
  })
}

方案2：全局配置transformRequest自动处理所有请求

这种方式更优雅，能让GET之外的所有请求（POST/PUT等）自动处理数据格式并设置正确的请求头，避免重复代码：

const instance = axios.create({
  baseURL: process.env.BASE_API,
  timeout: 5000,
  withCredentials: true
})

// 全局配置请求转换
instance.defaults.transformRequest = [function (data, headers) {
  // 针对非GET请求处理数据格式和请求头
  if (data) {
    headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
    return qs.stringify(data)
  }
  return data
}]

// 简化请求方法
function get (url, getData) {
  return instance.get(url, { params: getData })
}

function post (url, postData) {
  return instance.post(url, postData)
}

function put (url, putData) {
  return instance.put(url, putData)
}

export default { get, post, put }

为什么OPTIONS请求会出现？ #

浏览器的CORS机制规定，当请求的Content-Type不属于application/x-www-form-urlencoded、multipart/form-data或text/plain这三种“简单类型”时，会先发送一个OPTIONS预检请求，询问服务器是否允许该跨域请求。你的PUT请求因为丢失了正确的Content-Type，被识别为非简单请求，所以触发了OPTIONS预检。

内容的提问来源于stack exchange，提问作者htl