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
