Vue.js中如何通过vue-resource获取请求的HTTP协议版本？

嘿，这个问题我刚好研究过，来给你拆解下可行的方案～

首先得明确一个核心点：HTTP协议版本信息并不在响应头里，它属于请求连接的元数据，所以你用response.headers.get()肯定拿不到——这也是为啥开发者工具里要在「请求」标签页看它的原因。

接下来分两种可行的思路，结合vue-resource来实现：

1. 利用浏览器Performance API（兼容性更稳妥） #

浏览器的Performance API可以获取到每个资源请求的详细连接信息，包括协议版本。我们可以借助vue-resource的拦截器，在请求完成后匹配对应的性能条目：

// 注册vue-resource响应拦截器
Vue.http.interceptors.push((request, next) => {
  // 等待请求完成后处理
  next((response) => {
    // 通过请求URL匹配对应的性能条目
    const resourceEntries = performance.getEntriesByName(request.url);
    if (resourceEntries.length > 0) {
      // nextHopProtocol会返回类似"h2"（HTTP/2）、"http/1.1"这样的值
      const protocolVersion = resourceEntries[0].nextHopProtocol;
      console.log(`目标服务器使用的HTTP协议版本: ${protocolVersion}`);
      // 你也可以把这个值挂载到response对象上，方便后续业务逻辑使用
      response.$protocolVersion = protocolVersion;
    } else {
      // 兼容找不到条目的情况，默认标记为HTTP/1.x
      console.log('无法获取协议版本，默认视为HTTP/1.x');
    }
    return response;
  });
});

注意事项：

• 这个方法需要你的请求是同源，或者CORS请求携带了Timing-Allow-Origin响应头（你已经用代理绕过CORS，应该满足条件）；
• 兼容性很好，Chrome、Firefox、Safari 11+都支持Performance API的相关方法。

2. 借助Fetch API的非标准属性（更直接，但兼容性稍弱） #

你提到的nextHopProtocol其实是Fetch API中Response对象的候选标准属性，目前Chrome和Firefox都支持，Safari从15.4开始支持。如果你的vue-resource配置为使用Fetch底层（部分版本支持通过配置开启），可以直接拿到：

Vue.http.get('/your-api-path', {
  // 开启Fetch模式（不同vue-resource版本可能配置方式不同，需确认文档）
  emulateHTTP: false,
  fetch: true
}).then(response => {
  // 注意：这里的response如果是原生Fetch的Response对象，就可以直接取
  const protocol = response.nextHopProtocol;
  console.log(`HTTP协议版本: ${protocol}`);
});

如果你的vue-resource版本不支持直接切换到Fetch，也可以考虑直接使用原生Fetch发起请求，绕开框架封装，直接获取这个属性——毕竟你也提到这个问题和Vue本身无关。

最后补充兼容性说明 #

• nextHopProtocol还不是正式的W3C标准，属于候选推荐阶段，所以老版本浏览器（比如Safari <15.4）会不支持；
• 如果需要兼容全量浏览器，建议优先用Performance API的方案，拿不到时降级处理即可。

内容的提问来源于stack exchange，提问作者Federico Moretti