我们在vue开发中用axios进行跨域请求时有时会遇到，同一个接口请求了两次，并且第一次都是options请求，然后才是post/get请求
options请求
get请求
为什么会出现这种原因呢？
这是因为CORS跨域分为 简单跨域请求和复杂跨域请求；
简单跨域不会发送options请求，复杂跨域会发送一个预检请求options。
1.简单跨域满足的条件
1.请求方式是以下三种之一：
HEAD
GET
POST
2.HTTP的头信息不超出以下几种字段
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type
但是Content-Type的值，只限于三个值：
application/x-www-form-urlencoded、multipart/form-data、text/plain
2.复杂跨域满足的条件
1.请求方法不是GET/HEAD/POST
2. post请求的Content-Type并非application/x-www-form-urlencoded, multipart/form-data, 或text/plain
3.请求设置了自定义的header字段
在header中自定义了字段就会触发options预检请求
// 请求拦截器
service.interceptors.request.use(
config => {
if (store.getters.token) {
config.headers['Content-MD5'] = 'MD5'
config.headers['authToken'] = getToken()
config.headers['accessTokenRetireTime'] = getTokenTime()
}
return config
},
error => {
console.log(error) // for debug
return Promise.reject(error)
}
)
3.解决方案
1.可以通过跟后端协调，将所有options放行，此时便能通过post/get请求访问到数据。
2.引入qs模块处理数据
qs.parse()将URL解析成对象的形式
qs.stringify()将对象 序列化成URL的形式，以&进行拼接
1.安装qs
npm install qs
2.在main.js引入qs
import qs from 'qs';
Vue.prototype.$qs = qs;
3.vue实例组件里都可以直接用this.$qs.stringify(要处理的数据)，进行数据转换
个人倾向第一种方法，如果用第二种方法对前后端来说比较繁琐。
