背景是需要在跨域接口调用上增加一个请求头token,前端code类似于这样：

var xhr = new XMLHttpRequest();
// ...
xhr.open('POST', 'input url', true);
// 增加key=token的请求头
xhr.setRequestHeader('token', 'baukh');
// 发送请求
xhr.send(formData);

执行出现错误，报错信息如下:

Request header field header-test is not allowed by Access-Control-Allow-Headers in preflight response.

错误原因是由于node服务端返回的头文件与请求头不匹配, 需要对node服务端进行配置。

node服务端配置

// 配置允许跨域， 如果未存在跨域的话，可以不用配置
response.setHeader('Access-Control-Allow-Origin','*');
// 配置允许添加的请求头
response.setHeader('Access-Control-Allow-Headers','token');
// 配置允许通过javascript调用的请求头， 如果不存在可以不用配置
response.setHeader('Access-Control-Expose-Headers','token');
// 配置允许的请求方式
response.setHeader('Access-Control-Allow-Method','POST,GET');

node环境下配置跨域ajax头信息通过以上配置就可以了，在查看数据返回时发现存在了两次接口调用。
经过排查发现: 多出的请求类型为OPTIONS, 这是发送非简单数据类型的跨域请求时，浏览器自动发送的预请求。

出现OPTIONS(非简单请求)的两点条件(引用官方文档):

1. 请求以 GET, HEAD 或者 POST 以外的方法发起请求。或者，使用 POST，但请求数据为 application/x-www-form-urlencoded, multipart/form-data 或者 text/plain 以外的数据类型。比如说，用 POST 发送数据类型为 application/xml 或者 text/xml 的 XML 数据的请求。
2. 使用自定义请求头（比如添加诸如 X-PINGOTHER）

另外官网上有提到，通过对response增加头信息'Access-Control-Max-Age'来配置本次“预请求”的响应结果有效时间:

response.setHeader('Access-Control-Max-Age', 3600); // 我个人没有试出来效果

附http请求流程图:

http请求流程图.png

@拭目以待

表格管理插件:gridmanager.lovejavascript.com && github地址
QQ交流群 (452781895)：How To Make Love

《野生前端工程师》专辑中所有文章均为@拭目以待 原创，转载请注明出处。