跨域非简单请求配置自定义头信息

node,ajax,cors,options

拭目以待 发布于

背景是需要在跨域接口调用上增加一个请求头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请求流程图:


如果想了解更多信息请参考官方文档:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS