我正在参加「掘金·启航计划」

hTTP响应首部字段

Access-Control-Allow-Origin

使用语法：

Access-Control-Allow-Origin: <origin> | *

其中origin参数的值指定了允许访问该资源的外域URL，对于不需要携带身份凭证的请求，服务器可以指定该字段的值为通配符，表示允许来自所有域的请求。

http.createServer(function(req,res){
  items = {
    id:'1',
    name:'Jack'
  }
  let data = JSON.stringify({
    data:items,
    code:0
  })
  res.write(data);
  res.end()
}).listen(5000)
console.log('this server is beging')

这里起一个本地的node服务。端口5000。

axios({
   method:'get',
   url:'http://localhost:5000/',
}).then(res=>{
   console.log(res);
})

// 这里起一个react的项目，端口，3000，使用axios请求http://localhost:5000/ ，会报

Access to XMLHttpRequest at 'http://localhost:5000/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 因为二者的端口号不一致，所以产生的报错。那么可以在头部加上"Access-Control-Allow-Origin": "*"，这样就可以实现允许访问。

http.createServer(function(req,res){
  res.writeHead(200,{
    "Access-Control-Allow-Origin": "*"
  })
  items = {
    id:'1',
    name:'Jack'
  }
  let data = JSON.stringify({
    data:items,
    code:0
  })
  res.write(data);
  
  res.end()
}).listen(5000)

Access-Control-Allow-Headers

用于preflight request(预检请求)中，列出了建辉在正式请求的Access-Control-Allow-Headers字段中出现的首部信息。对于一些简单的首部会省略。预检请求是用于检查服务器是否支持cors即跨域资源共享。它一般是用了几个HTTP请求首部的options请求

我前端在访问接口时会在请求头里携带token，如果设置了token字段，请求头里自定的字段，那需要响应允许携带token字段。

"Access-Control-Allow-Headers":"*" // "token" 设置允许头部携带token字段

axios({
   method:'get',
   url:'http://localhost:5000/',
   headers:{
        "token":'123456'
   }
}).then(res=>{
   console.log(res);
})

携带token去访问也就会触发预检，预检是自动触发的并不需要自己去写。

Access-Control-Max-Age

上面每次请求都会产生两次访问，一次预检，一次访问真正要访问的。这样就不太好，可以通过响应头设置

Access-Control-Max-Age：<delta-seconds> // 时间以秒为单位，需要注意不同浏览器的最长时间不一样。
//如果值为 -1，表示禁用缓存，则每次请求前都需要使用 OPTIONS 预检请求。

可以在上面的服务器里加上

"Access-Control-Max-Age": 600, // 600秒

Cache-Control

缓存指令分为两种，一是请求指令，二是响应指令。

请求指令

客户端可以在 HTTP 请求中使用的标准 Cache-Control 指令。

Cache-Control: max-age=seconds // 设置缓存存储的最大周期，超过这个时间缓存被认为过期 (单位秒)。时间是相对于请求的时间。
Cache-Control: max-stale[=seconds] // 表明客户端愿意接收一个已经过期的资源。可以设置一个可选的秒数，表示响应不能已经过时超过该给定的时间。
Cache-Control: min-fresh=seconds // 表示客户端希望获取一个能在指定的秒数内保持其最新状态的响应。
Cache-control: no-cache // 在发布缓存副本之前，强制要求缓存把请求提交给原始服务器进行验证 (协商缓存验证)。
Cache-control: no-store // 缓存不应存储有关客户端请求或服务器响应的任何内容，即不使用任何缓存。
Cache-control: no-transform
Cache-control: only-if-cached

响应指令

Cache-control: must-revalidate
Cache-control: no-cache
Cache-control: no-store
Cache-control: no-transform
Cache-control: public // 表明响应可以被任何对象（包括：发送请求的客户端，代理服务器，等等）缓存，
Cache-control: private // 表明响应只能被单个用户缓存，不能作为共享缓存（即代理服务器不能缓存它）。私有缓存可以缓存响应内容，比如：对应用户的本地浏览器。
Cache-control: proxy-revalidate
Cache-Control: max-age=seconds
Cache-control: s-maxage=seconds

在上面的服务器请求头中加入代码

"Cache-Control":"public, max-age=31536000"

HTTP的header(一)