526互联

X-Requested-With

发布时间 2023-05-24 15:28:03作者: front-gl

原文：https://www.jianshu.com/p/2828d2d137e7

x-requested-with的作用以及用法详解

x-requested-with 请求头 区分ajax请求还是普通请求

在服务器端判断request来自Ajax请求(异步)还是传统请求(同步)： 
　　两种请求在请求的Header不同，Ajax 异步请求比传统的同步请求多了一个头参数 
　　1、传统同步请求参数 

accept  text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
　　　 accept-charset  gb2312,utf-8;q=0.7,*;q=0.7
　　　 accept-encoding  gzip,deflate
　　　 accept-language  zh-cn,zh;q=0.5
　　　 cache-control  max-age=0
　　　 connection  keep-alive
　　　 cookie  JSESSIONID=1A3BED3F593EA9747C9FDA16D309AF6B
　　　 host  192.168.101.72:8080
　　　 keep-alive  300
　　　 referer  XXX
　　　 user-agent  Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.0.15) Gecko/2009101601 Firefox/3.0.15 (.NET CLR 3.5.30729)

2、Ajax 异步请求方式 

accept  */*
　　　 accept-language  zh-cn
　　　 referer  xxx
　　　 x-requested-with  XMLHttpRequest  //表明是AJax异步
　　　 content-type  application/x-www-form-urlencoded,text/javascript
　　　 accept-encoding  gzip, deflate
　　　 user-agent  Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0; QQDownload 598; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; CIBA; .NET CLR 1.1.4322; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.1)
　　　 host  192.168.101.72:8080
　　　 content-length  233
　　　 connection  Keep-Alive
　　　 cache-control  no-cache
　　　 cookie  CSS=undefined; JSESSIONID=1B9AC25036290F7FB6823CCE1A24E541

可以看到 Ajax 请求多了个 x-requested-with ，可以利用它，request.getHeader(“x-requested-with”); 为 null，则为传统同步请求，为 XMLHttpRequest，则为 Ajax 异步请求。

 

axios设置异步X-Requested-With

背景：
服务器接受axios请求后，返回成功状态会以html方式，而不是类似ajax的json格式。这是由于axios没有像ajax那样在请求头中默认设置了 {X-Requested-With：'XMLHttpRequest'}

当axios中需要设置请求头时，如果apache服务器端设置了Header set Access-Control-Allow-Headers，需要同时设置允许接收X-Requested-With。
'X-Requested-With': 'XMLHttpRequest'

解决：
1，vue+vant项目中

service.interceptors.request.use(
  config => {
    config.headers = { 'X-Requested-With': 'XMLHttpRequest' }
    if (store.getters.token) {
      config.headers['X-Token'] = getToken()
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)
在请求中设置请求头：

config.headers = { 'X-Requested-With': 'XMLHttpRequest' }

2.vue+elementui

axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'
service.interceptors.request.use(
  config => {
    // do something before request is sent
    return config
  },
  error => {
    return Promise.reject(error)
  }
)
在设置拦截器前加入

axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'

 

 

 

 

 

 

 

 

XMLHttpRequest原理、promise与axios库的底层原理

XMLHttpRequest原理：创建一个xhr（俗称:小黄人）对象，设置请求方法和地址，发送请求（get传参直接url后面拼接字符）， post传参写在send（）中，还要转成js，修改请求头，最后注册一个响应事件。

 

promise是ES6新增的构造函数，作用是解决回调地狱，异步回调，层层嵌套。

promise相当于一个容器，里面装着异步代码，也可以说promise对象用来表示异步操作最后的结果和值。

它有三种状态，默认状态、已完成、已失败。

pending进行中是默认状态，所以它里面的代码会立即执行。

他的状态只有两种变化，进行中（pending）变已成功（fulfilled）或已失败(rejected),promise实例对象的then方法可以得到已成功的结果，catch方法可以得到已失败的结果。

all方法和race都是把多个promise对象合并成一个新promise对象，不同点是all会等所有promise执行完毕，race只会等最快的promise执行完毕。

 

axios库的底层原理：在XMLHttpRequest外面包一个promise。async异步函数是ES8新增的，async要写在function的左边，async和await要配套使用，await可以执行then并得到then的结果

 

promise是ES6新增的构造函数，作用是解决回调地狱，异步回调，层层嵌套。
promise相当于一个容器，里面装着异步代码，也可以说promise对象用来表示异步操作最后的结果和值。
它有三种状态，默认状态、已完成、已失败。
pending进行中是默认状态，所以它里面的代码会立即执行。
他的状态只有两种变化，进行中（pending）变已成功（fulfilled）或已失败(rejected),promise实例对象的then方法可以得到已成功的结果，catch方法可以得到已失败的结果。
all方法和race都是把多个promise对象合并成一个新promise对象，不同点是all会等所有promise执行完毕，race只会等最快的promise执行完毕。————————————————版权声明：本文为CSDN博主「LJHFI」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/ljhfi/article/details/130354258