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