Http请求头的x-requested-with 属性

今天在查看一些关于对axios封装的博客中,很多都有以下这一部分:

// 拦截request,设置全局请求为ajax请求
axios.interceptors.request.use((config) => {
  config.headers['X-Requested-With'] = 'XMLHttpRequest'
  return config
})

说实话以前使用axios的时候并没有注意到这个属性,查看了一些说明之后发现 x-requested-with 赋予 ‘XMLHttpRequest’ 值表示这是一个ajax请求,而如果值为null的话 表示一个普通的请求。

让我不是很理解的是,如果不手动设置这个属性,请求数据也是能成功的,并且也没有体现出来这个请求就是同步的请求(页面没有阻塞)。那么普通请求具体应用的场景是什么样的? 如果 x-requested-with属性的设置是必要的话,什么时候需要设置?

我理解的http请求是包含 ajax请求的,然后用的比较多的ajax请求的场景就是 请求api,用的比较多的http请求的场景比如说 浏览器访问一个url地址,或者 img标签之类的,或者请求js css资源应该都算。但是该如何解释使用 axios 等库发起请求时 不设置X-Requested-With属性,请求也能异步且成功呢?我查看到的资料来看,axios 没有对请求头中的X-Requested-With做默认处理,在chrome开发者工具中的network中的xhr下,确实也能找到请求头中不含X-Requested-With的一个请求,结果也正常了。那就不明白这个区别到底在哪里了。

服务器用来检测是否为异步 如果服务器没做任何针对的反馈 那么都一样

:persevere:方便再问两个问题不?

  1. 通常服务器判断了请求是否是异步 是什么样的场景?
  2. 平时我用promise 或者 async、await 时,代码“看起来”就像是 同步执行的,这样也比较符合编码习惯。所以导致了我一直以来都没有去关注页面发送的请求是否是异步的。从原理上来说,似乎是加了 X-Requested-With:XMLHttpRequest 就是异步请求,不加的话就是同步请求,可是如果真的是同步请求的话,都不用回调也不用promise 这些了啊,所以不对啊。我觉得不论加与不加应该都是异步请求啊,那服务器通过X-Requested-With 来判断是否异步不准确的啊?

X-Requested-With 是常见的第三方扩展字段,HTTP 规范里没有这个。一些 HTTP 服务器约定俗成用这个字段来定义请求的类型,例如当前请求是请求了一个页面(普通请求)还是请求了一段逻辑或数据(AJAX 请求,也就是 @Grewer 说的异步请求)。部分服务端依赖这个标识来明确需要执行的后端逻辑。然而对于前端,不管加不加都是 XHR 请求,所以技术上没区别。

技术上还是有区别的

像您说的这个 X-Requested-With 是常见的第三方扩展字段

扩展字段 by default 是 不能跨域传输的, 所以服务端可以用这个字段来检测是不是我自己的页面发的这个ajax请求, 如果不是 则error。 在ajax的情况下可以达到和CSRF token 相同的效果

详细的见如下文章