程序进行跨域请求时,出现以下两个问题:1.get请求跨域,post请求不跨域2.请求里一旦带了token,所有请求都会网络异常;报错( has been blocked by CORS policy:

问题:

程序进行跨域请求时,出现以下两个问题:

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;
}

注意:服务器部署时也有相关配置,也需要修改

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值