XMLHttpRequest简单了解一下

XMLHttpRequest简单了解一下

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

因为某些历史原因，后端大大需要对线上数据做些修复处理，但是因为不是简单执行个SQL就能解决，所以就需要前端触发哈。
但是呢，我们的前端小妹又懒得写个页面写个按钮事件，所以打算就直接写个HTTP GET请求，调用后端的Dubbo接口来进行修复处理。
这样就很简单咯~
上线后直接在浏览器中调用这个get请求，数据就修复啦~
嗯，想象很美好，可是一上线就傻眼了，调用接口直接 403 Forbidden了，
查看了一下代码才想起，当初为了避免csrf攻击，我们在生产环境的Node端做了Referer来源校验, 代码如下：

app.use('/api/*', function(req, res, next) {
  // 引入 "来源" 判断，避免 CSRF 攻击
  const baseUri = '.xxx.com'  // 合法域名
  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('请求成功');
   }
}

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

关于XMLHttpRequest更多了解可移步XMLHttpRequest MDN