XMLHttpRequest简单了解一下

XMLHttpRequest简单了解一下

最近的项目开发中遇到这么一个问题：

app.use('/api/*', function(req, res, next) {
  // 引入 "来源" 判断，避免 CSRF 攻击
  const baseUri =   // 合法域名
  if (runtime === 'product') {
    // 如果 referer 不存在那么返回 403
    if (!req.headers.referer) {
      res.sendStatus(403)
      return
    }
    // 利用 url.parse 获取 hostname
    const refererURL = url.parse(req.headers.referer)
    // 判断 hostname 是否合法
    const isAllowed = refererURL.hostname.endsWith(baseUri)
    if (!isAllowed) {
      res.sendStatus(403)
      return
    }
  }
  next()
})  

OMG！难不成我们要修改代码重新走上线流程么？！就为了一个按钮？！想想就可怕...

冷静了一会儿后，我们开始想办法解决。

这时，我们想到了原生的ajax请求（即使用XMLHttpRequest）。

首先，打开控制台，创建一个异步对象

const ajax = new XMLHttpRequest();

然后，设置请求的url参数

ajax.open('get', '/api/hotfix/');
// 参数一是请求的类型, 参数二是请求的url, 可以带参数

最后， 发送请求

ajax.send();

完美 └(^^)┐ ┌(^^)┘

当然如果需要查看请求是否发送成功还可以做如下操作：

// 注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function () {
   if (ajax.readyState === 4 && ajax.status === 200) {
    // 如果能够进到这个判断 说明请求成功
　　 console.log('请求成功');
   }
}

记录完毕~(๑¯◡¯๑)