1. 问题
如题:XMLHttpRequest cannot load. Request header field password is not allowed by Access-Control-Allow-Headers in preflight response
在请求的时候,触发options预检请求报错。
2. 解决方案
Access-Control-Request-Headers :*
改为
Access-Control-Request-Headers :Content-Type
通配符是2016年提出的, 低版本的浏览器不一定支持通配符。
chrome最低需要63版本。
3. 排查步骤
- 一般在跨域的时候发生此类问题。
- 跨域时,在请求头不符合三种条件(略)时,会触发options请求。
- 而options请求,有一个特殊的请求头, Access-Control-Request-Headers ,如果存在这个请求头,则响应头Access-Control-Allow-Headers必须存在。
- 根据报错信息,明显是响应头对应的值不符合要求。请求头的值是Content-type,而查看相应头是通配符。 使用抓包工具替换成Content-type后请求成功。
- 查资料发现通配符在16年提出,低版本浏览器不支持。查MDN发现chrome最低是63版本,而自己是60版本。
- 升级浏览器版本后,解决此问题。
4. 涉及知识点
- 跨域三要素
- 触发options的三要素
- options参数设置
- 浏览器对某些参数值的支持程度(可去MDN查看)
总结
chrome的日志还是很不错的,根据日志,一步一步排查原因,总能找到的。
另外在排查过程中使用抓包(我使用fiddler工具)替换,可以快速定位和解决问题。