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() - 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();
     }