在之前有位老哥问我,之前在本地测试的时候测试接口没问题,只发送一次。但请求服务器上的接口时,就出现了两次请求的问题。第一次发送的是options类型的请求,第二次才是正常的请求。如果后端设置了频繁请求拦截的话,那么第二次真正的请求的无法请求到数据。

由来

ajax请求遵循同源策略(协议、域名、端口号必须一致),如果其中一个不同,就会造成跨域。
浏览器同源策略的本质是:**一个域名的JS在未经允许下,不能读取另一个域名的内容。**但浏览器并不阻止你向另一个域名发送请求。跨域只是浏览器强加给JS的规则,浏览器其没有限制自己,例如img、script、a标签等。

一般我们处理跨域最简单的方式就是,在服务器端设置cors也就是设置Access-Control-Allow-Origin:*,允许客户端跨域访问。

有一种请求叫做Preflighted Request(带预检的跨域请求)。也叫非简单请求
Preflighted Request在发送真正请求,会先发送一个方法为OPTIONS的预请求(Preflighted Request),用于试探服务端是否能接受真正的请求。如果option获得的回应时拒绝性质的,如404、403、500等状态,就会停止post、get请求的发出。在预请求返回中,服务端也可以通知客户端,是否需要携带身份凭证(包括Cookies和HTTP认证等相关数据)。

简单请求

axios header 两次请求 http两次请求_Access


非简单请求如果是跨域请求的话,都会发送一次预请求(options),如果是本地请求的话则不会。只有跨域才可能触发多次请求。

解决方式

1.全部使用简单请求

这种方式最简单,但也不太行得通,毕竟现在大多都是非简单请求。如果业务不太复杂可以的话还是可以采用这种方式

2.设置缓存

设置Access-Control-Max-Age这个响应头,即Access-Control-Allow-Methods//Access-Control-Allow-Header可以被缓存多久。后端设置一次预请求缓存,就不用每次都发送Option请求了。

3.改造后端拦截器

如果拦截到的请求不是项目中常规的GET或POST请求,则拦截器直接放行。