vue axios跨域 Request Method: OPTIONS问题

最新推荐文章于 2025-11-10 16:22:50 发布

原创最新推荐文章于 2025-11-10 16:22:50 发布 · 1.7w 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#axios #跨域 #OPTIONS

vue 专栏收录该内容

11 篇文章

订阅专栏

在进行跨域登录功能开发时，发现在使用axios进行POST请求时，实际请求方法变为OPTIONS。这涉及到简单跨域请求与复杂跨域请求的区别，OPTIONS请求是复杂跨域请求的预检阶段。当请求方法非GET/HEAD/POST，POST请求Content-Type不为规定类型，或设置了自定义header时，会触发OPTIONS预请求。axios的默认设置可能导致这个问题。解决办法包括正确设置Content-Type或调整axios配置。

今天做跨域登录功能遇到这个问题(后端已做跨域处理)：
当跨域请求为post时候，请求的method变为了options。
在这里插入图片描述
其实跨域分为 简单跨域请求和复杂跨域请求：
简单跨域请求是不会发送options请求的
复杂跨域请求会发送一个预检请求options
复杂跨域请求要满足以下：
1、请求方法不是GET/HEAD/POST
2、POST请求的Content-Type并非application/x-www-form-urlencoded, multipart/form-data, 或text/plain
3、请求设置了自定义的header字段

参考链接

axios默认设置的['Content-Type']是application/json，会引发复杂跨域请求，就是所谓的method为options的现象，此阶段为预请求阶段，此阶段通过后才会发送正式的post请求。
其中引入qs模块是为了解析浏览器把参数当作字符串请求数据，导致请求参数无法传递到后台。
观察浏览器network发现两种方法最后的效果都是将Content-Type都变成了application/x-www-form-urlencoded
解决方法：

// request拦截器
service.interceptors.request.use(
  config => {
  	------------解决方法--------------------------------------------------
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded' 
    if (config.method === 'post') { 
      config.data = qs.stringify({
        ...config.data
      })
    }
    --------------------------------------------------------------
    if (store.getters.token) { // 设置全局参数uid，keyid
      // config.headers['X-Token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改

      if (config.method === 'post') { // 2019/4/10  by zzq
        const data = qs.parse(config.data)
        config.data = qs.stringify({
          keyid: 'keyid',
          uid: 'uid',
          ...data
        })
      }
      if (config.method === 'get') { // 2019/4/10  by zzzq
        config.params = {
          ...config.params,
          keyid: 'keyid',
          uid: 'uid'
        }
      }
    }
    return config
  },
  error => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
  }
)