问题:
程序进行跨域请求时,出现以下两个问题:
1.get请求跨域,post请求不跨域
2.请求里一旦带了token,所有请求都会网络异常
原因:
参照文档原链接
1.没token时get请求跨域,post请求不跨域(此时post请求是简单请求,好用;而get请求的Content-Type为json,属于非简单请求了,所以被禁)
2.请求里一旦带了token,所有请求都会网络异常(此时请求头塞入了自定义属性token,所以get和post都属于非简单请求了,都被禁了)
知识点补充:浏览器的两种请求
浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。
1、简单请求
只要同时满足以下两大条件,就属于简单请求。
(1) 请求方法是以下三种方法之一:HEAD、GET、POST
(2)HTTP的头信息不超出以下几种字段:
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type:只限于三个值application/x-www-form-urlencoded
multipart/form-data
text/plain
凡是不同时满足上面两个条件,就属于非简单请求。
由于我向请求头中添加了自定义的属性,所以发送请求时就属于非简单请求。
2、预检请求
非简单请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为 “预检” 请求(preflight)。
浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest请求,否则就报错。
最终解决方案:
由于在后端拦截器中拦截了所有的请求,只有检查到请求头中真实存在的token值才会放行请求,这就导致了浏览器发起的预检请求也被拦截了(由于该请求头中没有携带自定义的 Authorization 属性,所以被拦截),最终导致正式的 XMLHttpRequest 请求没有发出去。
解决方案:由于预检请求是 OPTIONS 类型的,所以可以和后端人员沟通下在拦截器中放行 OPTIONS 类型的请求,如下:
if (request.getMethod().equals("OPTIONS")) {
return true;
}
注意:服务器部署时也有相关配置,也需要修改