最近看了一些关于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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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请求头字段一览

协议头字段名 说明 示例 状态
Accept 能够接受的回应内容类型（Content-Types）。参见内容协商。 Accept: text/plain 常设
Accept-Charset 能够接受的字符集 Accept-Charset: utf-8 常设
Accept-Encoding 能够接受的编码方式列表。参考HTTP压缩。 Accept-Encoding: gzip, deflate 常设
Accept-Language 能够接受的回应内容的自然语言列表。参考 内容协商 。 Accept-Language: en-US 常设
Accept-Datetime 能够接受的按照时间来表示的版本 Accept-Datetime: Thu, 31 May 2007 20:35:00 GMT 临时
Authorization 用于超文本传输协议的认证的认证信息 Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ== 常设
Cache-Control 用来指定在这次的请求/响应链中的所有缓存机制 都必须 遵守的指令 Cache-Control: no-cache 常设
Connection 该浏览器想要优先使用的连接类型 Connection: keep-alive``Connection: Upgrade 常设
Cookie 之前由服务器通过 Set- Cookie （下文详述）发送的一个 超文本传输协议Cookie Cookie: $Version=1; Skin=new; 常设: 标准
Content-Length 以 八位字节数组 （8位的字节）表示的请求体的长度 Content-Length: 348 常设
Content-MD5 请求体的内容的二进制 MD5 散列值，以 Base64 编码的结果 Content-MD5: Q2hlY2sgSW50ZWdyaXR5IQ== 过时的
Content-Type 请求体的 多媒体类型 （用于POST和PUT请求中） Content-Type: application/x-www-form-urlencoded 常设
Date 发送该消息的日期和时间(按照 RFC 7231 中定义的”超文本传输协议日期”格式来发送) Date: Tue, 15 Nov 1994 08:12:31 GMT 常设
Expect 表明客户端要求服务器做出特定的行为 Expect: 100-continue 常设
From 发起此请求的用户的邮件地址 From: user@example.com 常设
Host 服务器的域名(用于虚拟主机 )，以及服务器所监听的传输控制协议端口号。如果所请求的端口是对应的服务的标准端口，则端口号可被省略。 自超文件传输协议版本1.1（HTTP/1.1）开始便是必需字段。 Host: en.wikipedia.org:80``Host: en.wikipedia.org 常设
If-Match 仅当客户端提供的实体与服务器上对应的实体相匹配时，才进行对应的操作。主要作用时，用作像 PUT 这样的方法中，仅当从用户上次更新某个资源以来，该资源未被修改的情况下，才更新该资源。 If-Match: "737060cd8c284d8af7ad3082f209582d" 常设
If-Modified-Since 允许在对应的内容未被修改的情况下返回304未修改（ 304 Not Modified ） If-Modified-Since: Sat, 29 Oct 1994 19:43:31 GMT 常设
If-None-Match 允许在对应的内容未被修改的情况下返回304未修改（ 304 Not Modified ），参考 超文本传输协议 的实体标记 If-None-Match: "737060cd8c284d8af7ad3082f209582d" 常设
If-Range 如果该实体未被修改过，则向我发送我所缺少的那一个或多个部分；否则，发送整个新的实体 If-Range: "737060cd8c284d8af7ad3082f209582d" 常设
If-Unmodified-Since 仅当该实体自某个特定时间已来未被修改的情况下，才发送回应。 If-Unmodified-Since: Sat, 29 Oct 1994 19:43:31 GMT 常设
Max-Forwards 限制该消息可被代理及网关转发的次数。 Max-Forwards: 10 常设
Origin 发起一个针对 跨来源资源共享 的请求（要求服务器在回应中加入一个‘访问控制-允许来源’（’Access-Control-Allow-Origin’）字段）。 Origin: http://www.example-social-network.com 常设: 标准
Pragma 与具体的实现相关，这些字段可能在请求/回应链中的任何时候产生多种效果。 Pragma: no-cache 常设但不常用
Proxy-Authorization 用来向代理进行认证的认证信息。 Proxy-Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ== 常设
Range 仅请求某个实体的一部分。字节偏移以0开始。参见字节服务。 Range: bytes=500-999 常设
Referer [sic] 表示浏览器所访问的前一个页面，正是那个页面上的某个链接将浏览器带到了当前所请求的这个页面。 Referer: http://en.wikipedia.org/wiki/Main_Page 常设
TE 浏览器预期接受的传输编码方式：可使用回应协议头 Transfer-Encoding 字段中的值；另外还可用”trailers”（与”分块 “传输方式相关）这个值来表明浏览器希望在最后一个尺寸为0的块之后还接收到一些额外的字段。 TE: trailers, [deflate](https://zh.wikipedia.org/wiki/DEFLATE "DEFLATE") 常设
User-Agent 浏览器的浏览器身份标识字符串 User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:12.0) Gecko/20100101 Firefox/21.0 常设
Upgrade 要求服务器升级到另一个协议。 Upgrade: HTTP/2.0, SHTTP/1.3, IRC/6.9, RTA/x11 常设
Via 向服务器告知，这个请求是由哪些代理发出的。 Via: 1.0 fred, 1.1 example.com (Apache/1.1) 常设
Warning 一个一般性的警告，告知，在实体内容体中可能存在错误。 Warning: 199 Miscellaneous warning 常设

response响应头字段一览

字段名 说明 例子 状态
Access-Control-Allow-Origin 指定哪些网站可参与到跨来源资源共享过程中 Access-Control-Allow-Origin: * 临时
Accept-Patch 指定服务器支持的文件格式类型。 Accept-Patch: text/example;charset=utf-8 常设
Accept-Ranges 这个服务器支持哪些种类的部分内容范围 Accept-Ranges: bytes 常设
Age 这个对象在代理缓存中存在的时间，以秒为单位 Age: 12 常设
Allow 对于特定资源有效的动作。针对HTTP/405这一错误代码而使用 Allow: GET, HEAD 常设
Cache-Control 向从服务器直到客户端在内的所有缓存机制告知，它们是否可以缓存这个对象。其单位为秒 Cache-Control: max-age=3600 常设
Connection 针对该连接所预期的选项 Connection: close 常设
Content-Disposition 一个可以让客户端下载文件并建议文件名的头部。文件名需要用双引号包裹。 Content-Disposition: attachment; filename="fname.ext" 常设
Content-Encoding 在数据上使用的编码类型。参考 超文本传输协议压缩 。 Content-Encoding: gzip 常设
Content-Language 内容所使用的语言 Content-Language: da 常设
Content-Length 回应消息体的长度，以 字节 （8位为一字节）为单位 Content-Length: 348 常设
Content-Location 所返回的数据的一个候选位置 Content-Location: /index.htm 常设
Content-MD5 回应内容的二进制 MD5 散列，以 Base64 方式编码 Content-MD5: Q2hlY2sgSW50ZWdyaXR5IQ== 过时的
Content-Range 这条部分消息是属于某条完整消息的哪个部分 Content-Range: bytes 21010-47021/47022 常设
Content-Type 当前内容的MIME类型 Content-Type: text/html; charset=utf-8 常设
Date 此条消息被发送时的日期和时间(按照 RFC 7231 中定义的“超文本传输协议日期”格式来表示) Date: Tue, 15 Nov 1994 08:12:31 GMT 常设
ETag 对于某个资源的某个特定版本的一个标识符，通常是一个 消息散列 ETag: "737060cd8c284d8af7ad3082f209582d" 常设
Expires 指定一个日期/时间，超过该时间则认为此回应已经过期 Expires: Thu, 01 Dec 1994 16:00:00 GMT 常设: 标准
Last-Modified 所请求的对象的最后修改日期(按照 RFC 7231 中定义的“超文本传输协议日期”格式来表示) Last-Modified: Tue, 15 Nov 1994 12:45:26 GMT 常设
Link 用来表达与另一个资源之间的类型关系，此处所说的类型关系是在 RFC 5988 中定义的 Link: </feed>; rel="alternate" 常设
Location 用来 进行重定向，或者在创建了某个新资源时使用。 Location: http://www.w3.org/pub/WWW/People.html 常设
P3P 用于支持设置P3P策略，标准格式为“P3P:CP="your_compact_policy"”。然而P3P规范并不成功，大部分现代浏览器没有完整实现该功能，而大量网站也将该值设为假值，从而足以用来欺骗浏览器的P3P插件功能并授权给第三方Cookies。 P3P: CP="This is not a P3P policy! ``See http://www.google.com/support/accounts/bin/answer.py?hl=en&answer=151657 for more info." 常设
Pragma 与具体的实现相关，这些字段可能在请求/回应链中的任何时候产生多种效果。 Pragma: no-cache 常设
Proxy-Authenticate 要求在访问代理时提供身份认证信息。 Proxy-Authenticate: Basic 常设
Public-Key-Pins 用于缓解中间人攻击，声明网站认证使用的传输层安全协议证书的散列值 Public-Key-Pins: max-age=2592000; pin-sha256="E9CZ9INDbd+2eRQozYqqbQ2yXLVKB9+xcprMF+44U1g="; 常设
Refresh 用于设定可定时的重定向跳转。右边例子设定了5秒后跳转至“http://www.w3.org/pub/WWW/People.html”。 Refresh: 5; url=http://www.w3.org/pub/WWW/People.html 专利并非标准Netscape实现的扩展，但大部分网页浏览器也支持。
Retry-After 如果某个实体临时不可用，则，此协议头用来告知客户端日后重试。其值可以是一个特定的时间段(以秒为单位)或一个超文本传输协议日期。 * Example 1: Retry-After: 120* Example 2: Retry-After: Fri, 07 Nov 2014 23:59:59 GMT 常设
Server 服务器的名字 Server: Apache/2.4.1 (Unix) 常设
Set-Cookie HTTP cookie Set-Cookie: UserID=JohnDoe; Max-Age=3600; Version=1 常设: 标准
Status 通用网关接口 协议头字段，用来说明当前这个超文本传输协议回应的 状态 。普通的超文本传输协议回应，会使用单独的“状态行”（”Status-Line”）作为替代，这一点是在 RFC 7230 中定义的。 Status: 200 OK Not listed as a registered field name
Strict-Transport-Security HTTP 严格传输安全这一头部告知客户端缓存这一强制 HTTPS 策略的时间，以及这一策略是否适用于其子域名。 Strict-Transport-Security: max-age=16070400; includeSubDomains 常设: 标准
Trailer 这个头部数值指示了在这一系列头部信息由由分块传输编码编码。 Trailer: Max-Forwards 常设
Transfer-Encoding 用来将实体安全地传输给用户的编码形式。当前定义的方法包括：分块（chunked）、compress、deflate、gzip和identity。 Transfer-Encoding: chunked 常设
Upgrade 要求客户端升级到另一个协议。 Upgrade: HTTP/2.0, SHTTP/1.3, IRC/6.9, RTA/x11 常设
Vary 告知下游的代理服务器，应当如何对未来的请求协议头进行匹配，以决定是否可使用已缓存的回应内容而不是重新从原始服务器请求新的内容。 Vary: * 常设
Via 告知代理服务器的客户端，当前回应是通过什么途径发送的。 Via: 1.0 fred, 1.1 example.com (Apache/1.1) 常设
Warning 一般性的警告，告知在实体内容体中可能存在错误。 Warning: 199 Miscellaneous warning 常设
WWW-Authenticate 表明在请求获取这个实体时应当使用的认证模式。 WWW-Authenticate: Basic 常设
X-Frame-Options 点击劫持保护：* deny：该页面不允许在 frame 中展示，即使是同域名内。* sameorigin：该页面允许同域名内在 frame 中展示。* allow-from *uri*：该页面允许在指定uri的 frame 中展示。* allowall：允许任意位置的frame显示，非标准值。 X-Frame-Options: deny 过时的

参考链接：
wikipedia-HTTP headers