使用XMLHttpRequest.setRequestHeader时默认请求头(如Origin)丢失问题咨询

问题原因 #

你遇到的这个现象90%以上的概率是把CORS预检请求（OPTIONS请求）的请求头当成了实际POST请求的头：

• 你新增的auth属于非标准HTTP请求头，会触发浏览器的CORS预检机制：在发送真实POST请求前，浏览器会先发送一个OPTIONS请求到目标地址，确认服务器是否允许跨域请求、是否允许携带自定义的auth头。
• 预检请求本身的请求头就非常精简，仅携带和跨域校验相关的字段，不会带完整的业务请求头，如果你服务器端的CORS配置不符合要求，预检请求会直接失败，浏览器根本不会发送后续的真实POST请求，你看到的就是预检请求的头。
• 另外还有一个小概率场景是Chrome开发者工具默认开启了请求头精简展示，隐藏了部分默认头，你看到的只是筛选后的内容。

可行解决方案 #

• 首先确认请求类型：打开Chrome开发者工具「网络」面板，筛选全部请求，查看是否存在对应的OPTIONS请求：
  • 如果存在OPTIONS请求，先检查它的响应是否符合CORS规则：必须包含Access-Control-Allow-Origin（值为你当前页面的域名或者*）、Access-Control-Allow-Headers: auth、Access-Control-Allow-Methods: POST三个响应头，缺任何一个都会导致预检失败，补全服务器端的CORS配置即可解决。
  • 如果没有OPTIONS请求（同站请求不会触发预检），点击请求头区域的「显示全部」按钮，即可看到被隐藏的默认头，包括Origin字段（同站请求本身不需要Origin头，不存在也不影响请求执行）。
• 临时调试不需要预检的话，可以把auth参数放到URL的query参数里，不使用自定义请求头，此时请求属于简单请求不会触发预检，所有默认头都会正常携带，但这种方式安全性较低，生产环境不推荐。

内容的提问来源于stack exchange，提问作者HOK