最近看了一些关于HTTP headers的知识，平时与服务端联调接口，查看headers必不可少。

headers（请求头）允许客户端和服务器通过 request和 response传递附加信息。一个请求头由名称（不区分大小写）后跟一个冒号“：”，冒号后跟具体的值（不带换行符）组成。该值前面的引导空白会被忽略。

每一个AJAX请求，都可以设置header的相关属性，可以说headers是HTTP请求必不可少的部分。HTML中<script src="http://example.com/test.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.test.com/theme.css" /> 的src和href属性对应的资源文件，也是通过HTTP请求加载的，还有
<img src="http://example.jpg"/>图片的请求，也是HTTP的。

既然图片、JS、CSS都是HTTP请求，那么如何在请求这些资源的时候设置headers呢？

如果直接给src 和 href 属性赋值，肯定是没办法设置header的。
关于图片的设置，是有办法可行的，但是对于js css 等资源，目前没有什么特别好的方式（当然，日常开发也几乎不会有这样的应用场景）。

header --img:src

图片设置header

var oReq = new XMLHttpRequest();
oReq.open("GET", "https://s2.ax1x.com/2019/07/30/eJHI81.png", true);
oReq.setRequestHeader("Your-Header-Here", "Value");
// use multiple setRequestHeader calls to set multiple values
oReq.responseType = "arraybuffer";
oReq.onload = function (oEvent) {
  
  var arrayBuffer = oReq.response; // Note: not oReq.responseText
  if (arrayBuffer) {
    var u8 = new Uint8Array(arrayBuffer);
    var b64encoded = btoa(arrayBufferToString(u8));
    var mimetype="image/png"; // or whatever your image mime type is
    document.getElementById("testImg").src="data:"+mimetype+";base64,"+b64encoded;
  }
};
oReq.send(null);
function arrayBufferToString(buffer) {
  var bufView = new Uint16Array(buffer)
  var length = bufView.length
  var result = ''
  var addition = Math.pow(2, 16) - 1

  for (var i = 0; i < length; i += addition) {
    if (i + addition > length) {
      addition = length - i
    }
    result += String.fromCharCode.apply(null, bufView.subarray(i, i + addition))
  }
  return result
}

参考链接：Img src path with header params to pass

header -- js:src/ css:href

页面中的js和css暂时还没有好的方法

参考链接： is it possible to set custom headers on js <script> requests?

headers的相关介绍

附上headers的相关说明：

HTTP 头字段根据实际用途被分为以下 4 种类型：

• 通用头字段(英语：General Header Fields)
• 请求头字段(英语：Request Header Fields)
• 响应头字段(英语：Response Header Fields)
• 实体头字段(英语：Entity Header Fields)

request请求头字段一览

response响应头字段一览