vue axios跨域 Request Method: OPTIONS问题 - 查问我看

原学习JS，TS，Vue等等语言做一个信息分享的小平台

|-转 vue axios跨域 Request Method: OPTIONS问题

PHPer 2022-10-27 357 0 0

今天做跨域登录功能遇到这个问题(后端已做跨域处理)：当跨域请求为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)
  }
)

以上内容主要来自：https://blog.csdn.net/Homer_Simpson/article/details/89188068...

浏览更多内容请先登录。 立即注册

更新于：2022-10-27 04:28:24

您需要登录后才可以评论。立即注册

原 学习JS，TS，Vue等等语言做一个信息分享的小平台

|-转 vue axios跨域 Request Method: OPTIONS问题

7

928

104w+

228

服务器搭建

WEB

个人爱好

游戏

互联网

mysql

Yii2

php

WEB后端

linux

采集

网站建设

Python

操作系统

Centos

WEB前端

经济

生活

内容整理

资源

数据库

OS

JS

保险

常用命令

php项目

网站

IT

电影

问题整理

composer

观点

NodeJs

Yii扩展

学习

魔兽世界

工具

LAMP

欧美电影

全文索引

Apache

美女

发现

Android

前端

服务器维护

uwow

PHP框架

随笔

评测

服务器

邮件服务器

影评

音乐

国产电影

历史

Windows

错误处理

推荐内容

原学习JS，TS，Vue等等语言做一个信息分享的小平台