js 跨域访问 获取验证码图片 获取header 自定义属性

1、net core web api 后端

        /// <summary>
        /// 图形验证码
        /// </summary>
        [HttpGet]
        public IActionResult ValidateCode1()
        {
            string code = "";
            string yzm_id = "YZM_TOKEN_" + Guid.NewGuid().ToString();
            System.IO.MemoryStream ms = YZM1.Create(out code);//生成验证码图片流
            HttpContext.Response.Headers.Add("Access-Control-Expose-Headers", "YZM_TOKEN");
            HttpContext.Response.Headers.Add("YZM_TOKEN", yzm_id);//验证码token 放入headers头
            HttpContext.Response.Headers.Add("Access-Control-Allow-Origin", "*");//允许跨域
            CacheService.Add(yzm_id, code, DateTime.Now.AddMinutes(1) - DateTime.Now);//放入缓存有效期1分钟
            return File(ms.ToArray(), @"image/png");
        }

注意：

HttpContext.Response.Headers.Add("Access-Control-Expose-Headers", "YZM_TOKEN"); 必须添加 不然跨域前端 js 获取不到

设置允许跨域

HttpContext.Response.Headers.Add("Access-Control-Allow-Origin", "*");//允许跨域


2、前端获取绑定 到 img 标签
使用axios 插件

安装

1、 利用npm安装npm install axios --save
2、 利用bower安装bower install axios --save
3、 直接利用cdn引入<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

        <div id="codeNum">
          <img id="codeNum1" src="" alt="验证码">
          <input type="hidden" id="yzm_token">
        </div>

//验证码
    function generatedCode() {
      axios.get('https://localhost:44357/api/YZM', { responseType: 'blob' }).then
        (
          function (response) {
            var blob = response.data;
            var img = document.getElementById("codeNum1");
            document.getElementById("yzm_token").value = response.headers.yzm_token;
            img.onload = function (e) {
              window.URL.revokeObjectURL(img.src);
            };
            img.src = window.URL.createObjectURL(blob);
          }
        );

原生态自己写：

    function generatedCode1(){
      var xmlhttp;
      xmlhttp = new XMLHttpRequest();
      xmlhttp.open("GET", "https://localhost:44357/api/YZM", true);
      xmlhttp.responseType = "blob";
      xmlhttp.onload = function () {
        if (this.status == 200) {
          var blob = this.response;
          var img = document.getElementById("codeNum1");
          document.getElementById("yzm_token").value = this.getResponseHeader("yzm_token");
          img.onload = function (e) {
            window.URL.revokeObjectURL(img.src);
          };
          img.src = window.URL.createObjectURL(blob);
        }
      }
      xmlhttp.send();
    }