抓取图片验证码的请求

背景：因登录系统改造，原本的验证码是直接以img标签的形式直接放在页面中，但改造后的登录系统需要获取该请求的请求头中的数据，改造如下

// react 页面中写法
{
    showVcode && 
      <Input type="text" label="验证码" maxLength="6" placeholder="请输入验证码" ref="validationCode"
        showClear
        focusInput={focusInput}
        errorInput={errorInput}
        name="validationCode"
        value={validationCode}
        onFocus={this.handleFocus('validationCode')}
        onChange={this.linkState('validationCode')}
        // vcode right={<img className="weui-vcode-img" id="imgCode" onClick={this.refreshVCode} src={imgUrl} />}
        right={<span onClick={this.getCodeAndAuthKey.bind()} className="" id="imgCode"></span>}
      />
    
}
getCodeAndAuthKey: function() {
  var url = __mobileBaseUrl + '/main/action/' + 'validationCode?t=' + (new Date().getTime())
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'blob';
  xhr.setRequestHeader('token', $.fn.cookie('SESSION'));    // 此处可以设置请求头
  xhr.onload = function (a, b, c) {
    if (this.status == 200) {
      let authkey = this.getResponseHeader('token');    // 从此处获取请求头中需要的数据
      $.fn.cookie('SESSION', authkey, { path: '/' });
      var blob = this.response;
      var img = document.createElement('img');
      img.onload = function (e) {
        window.URL.revokeObjectURL(img.src);
      };
      img.src = window.URL.createObjectURL(blob);
      img.className = 'weui-vcode-img'
      $('#imgCode').html(img);
    }
  }
  xhr.send();
},
复制代码

• 需注意的一个地方是点击验证码图片容器的点击事件需要用.bind()，否则点击事件响应有问题