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

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

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

PHPer 2022-10-27 258 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问题

6

866

92w+

228

服务器搭建

WEB

个人爱好

游戏

互联网

Yii2

mysql

php

WEB后端

linux

网站建设

操作系统

Centos

采集

经济

生活

Python

资源

WEB前端

数据库

OS

保险

JS

内容整理

php项目

常用命令

网站

电影

问题整理

IT

composer

观点

Yii扩展

魔兽世界

学习

LAMP

工具

欧美电影

全文索引

发现

Apache

美女

Android

服务器维护

前端

uwow

随笔

评测

服务器

NodeJs

影评

音乐

国产电影

历史

PHP框架

Windows

错误处理

新闻

推荐内容

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