解决 axios 跨域 Request Method: OPTIONS问题(预检请求)
我们在vue开发中用axios进行跨域请求时有时会遇到,同一个接口请求了两次,并且第一次都是options请求,然后才是post/get请求如下图为什么会出现这种原因呢?这是因为CORS跨域分为 简单跨域请求和复杂跨域请求;简单跨域不会发送options请求,复杂跨域会发送一个预检请求options。1.简单跨域满足的条件1.请求方式是以下三种之一:HEADGETPOST2.HTTP的头信息不超出
我们在vue开发中用axios进行跨域请求时有时会遇到,同一个接口请求了两次,并且第一次都是options请求,然后才是post/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. Allow-Method 允许 OPTIONS方式
2. Access-Control-Allow-Origin 对其他域名开放
3. Access-Control-Allow-Headers 添加CompanyId,TrackId等需要允许通过的字段
更多推荐
所有评论(0)