XMLHttpRequest簡(jiǎn)單了解一下

最近的項(xiàng)目開發(fā)中遇到這么一個(gè)問題：

因?yàn)槟承v史原因，后端大大需要對(duì)線上數(shù)據(jù)做些修復(fù)處理，但是因?yàn)椴皇呛?jiǎn)單執(zhí)行個(gè)SQL就能解決，所以就需要前端觸發(fā)哈。
但是呢，我們的前端小妹又懶得寫個(gè)頁(yè)面寫個(gè)按鈕事件，所以打算就直接寫個(gè)HTTP GET請(qǐng)求，調(diào)用后端的Dubbo接口來進(jìn)行修復(fù)處理。
這樣就很簡(jiǎn)單咯~
上線后直接在瀏覽器中調(diào)用這個(gè)get請(qǐng)求，數(shù)據(jù)就修復(fù)啦~
嗯，想象很美好，可是一上線就傻眼了，調(diào)用接口直接 403 Forbidden了，
查看了一下代碼才想起，當(dāng)初為了避免csrf攻擊，我們?cè)谏a(chǎn)環(huán)境的Node端做了Referer來源校驗(yàn), 代碼如下：

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！難不成我們要修改代碼重新走上線流程么？！就為了一個(gè)按鈕？！想想就可怕...

冷靜了一會(huì)兒后，我們開始想辦法解決。

這時(shí)，我們想到了原生的ajax請(qǐng)求（即使用XMLHttpRequest）。

首先，打開控制臺(tái)，創(chuàng)建一個(gè)異步對(duì)象

const ajax = new XMLHttpRequest();

然后，設(shè)置請(qǐng)求的url參數(shù)

ajax.open('get', '/api/hotfix/');
// 參數(shù)一是請(qǐng)求的類型, 參數(shù)二是請(qǐng)求的url, 可以帶參數(shù)

最后， 發(fā)送請(qǐng)求

ajax.send();

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

當(dāng)然如果需要查看請(qǐng)求是否發(fā)送成功還可以做如下操作：

// 注冊(cè)事件 onreadystatechange 狀態(tài)改變就會(huì)調(diào)用
ajax.onreadystatechange = function () {
   if (ajax.readyState === 4 && ajax.status === 200) {
    // 如果能夠進(jìn)到這個(gè)判斷 說明請(qǐng)求成功
　　 console.log('請(qǐng)求成功');
   }
}

記錄完畢~(?ˉ?ˉ?)

關(guān)于XMLHttpRequest更多了解可移步XMLHttpRequest MDN