之前开发vue项目时,需要在请求头里添加一个token字段,开发的时候都正常,等到部署到正式环境发现很多版本比较低的chorme浏览器都报错,错误如下:
XMLHttpRequest cannot load http://******** .Request header field token is not allowed by Access-Control-Allow-Headers in preflight response
后来查阅资料发现是因为我们在请求头header中设置了了自定义的token字段,所以跨域请求就认为这是一个复杂的请求,他就会先进行预校验,也就是我们说的Options请求,等Options请求成功之后它才会进行post或者get请求,所以在发送Options请求的时候要校验请求头,我们的后台之前的设置的是resp.setheaders(Access-Control-Allow-Headers:'*');
经过如下几步可以解决问题:
在服务端过滤器的Response响应的请求头中设置:resp.setheaders(Access-Control-Allow-Headers:'token')这个属性来校验自定义请求头,但是经过测试发现这样设置还是没有校验成功,经过再次测试,发现在请求头中设置为resp.setheaders(Access-Control-Allow-Headers:'token,content-type')这样就可以正常的访问了,
注意:可能是我们前端预请求成功之后的POST请求默认带有content-type的请求头,所以要将这个也加入到验证中去,一旦自己设置了自定义请求头那么在服务端就不能统一放行设置为*,这样是不会通过校验的,所以如果自己有添加多个自定义的请求头那么在后端要一一列出来不能用*代替。