背景是需要在跨域接口調(diào)用上增加一個請求頭token,前端code類似于這樣：
var xhr = new XMLHttpRequest();
// ...
xhr.open('POST', 'input url', true);
// 增加key=token的請求頭
xhr.setRequestHeader('token', 'baukh');
// 發(fā)送請求
xhr.send(formData);
執(zhí)行出現(xiàn)錯誤量没，報錯信息如下:
Request header field header-test is not allowed by Access-Control-Allow-Headers in preflight response.
錯誤原因是由于node服務(wù)端返回的頭文件與請求頭不匹配, 需要對node服務(wù)端進行配置殴蹄。
node服務(wù)端配置
// 配置允許跨域， 如果未存在跨域的話刺下，可以不用配置
response.setHeader('Access-Control-Allow-Origin','*');
// 配置允許添加的請求頭
response.setHeader('Access-Control-Allow-Headers','token');
// 配置允許通過javascript調(diào)用的請求頭稽荧， 如果不存在可以不用配置
response.setHeader('Access-Control-Expose-Headers','token');
// 配置允許的請求方式
response.setHeader('Access-Control-Allow-Method','POST,GET');
node環(huán)境下配置跨域ajax頭信息通過以上配置就可以了，在查看數(shù)據(jù)返回時發(fā)現(xiàn)存在了兩次接口調(diào)用畅卓。
經(jīng)過排查發(fā)現(xiàn): 多出的請求類型為OPTIONS, 這是發(fā)送非簡單數(shù)據(jù)類型的跨域請求時蟋恬，瀏覽器自動發(fā)送的預(yù)請求歼争。
出現(xiàn)OPTIONS(非簡單請求)的兩點條件(引用官方文檔):
- 請求以 GET, HEAD 或者 POST 以外的方法發(fā)起請求×┟В或者乔遮，使用 POST豹绪，但請求數(shù)據(jù)為 application/x-www-form-urlencoded, multipart/form-data 或者 text/plain 以外的數(shù)據(jù)類型。比如說申眼，用 POST 發(fā)送數(shù)據(jù)類型為 application/xml 或者 text/xml 的 XML 數(shù)據(jù)的請求。
- 使用自定義請求頭（比如添加諸如 X-PINGOTHER）
另外官網(wǎng)上有提到蝉衣，通過對response增加頭信息'Access-Control-Max-Age'來配置本次“預(yù)請求”的響應(yīng)結(jié)果有效時間:
response.setHeader('Access-Control-Max-Age', 3600); // 我個人沒有試出來效果
附http請求流程圖:
http請求流程圖.png
如果想了解更多信息請參考官方文檔：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
@拭目以待
表格管理插件:gridmanager.lovejavascript.com && github地址
QQ交流群 (452781895)：How To Make Love
