使用 axios 进行跨域进行跨域请求时有时会遇到,同一个接口请求了两次,并且第一次都是options请求,然后才是post/get请求
为什么会出现这种原因呢?
这是因为CORS跨域分为:简单跨域请求 和 复杂跨域请求
简单跨域不会发送options请求,复杂跨域会发送一个预检请求options
1. 简单跨域满足的条件
请求方式是以下三种之一:
-
HEAD
-
GET
-
POST
HTTP的头信息不超出以下几种字段:
-
Accept
-
Accept-Language
-
Content-Language
-
Last-Event-ID
-
Content-Type
Content-Type的值,只限于三个值:
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
2. 复杂跨域满足的条件
-
请求方法不是GET/HEAD/POST
-
post请求的Content-Type并非application/x-www-form-urlencoded, multipart/form-data, 或text/plain
-
请求设置了自定义的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. 解决方案
要解决此类问题共分三步(某个特定请求级别): 都是服务器那边配置
-
Allow-Method 允许 OPTIONS方式
-
Access-Control-Allow-Origin 对其他域名开放
-
Access-Control-Allow-Headers 添加CompanyId,TrackId等需要允许通过的字段