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

1、net core web api 后端

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

注意：

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>

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

 1 //验证码
 2     function generatedCode() {
 3       axios.get('https://localhost:44357/api/YZM', { responseType: 'blob' }).then
 4         (
 5           function (response) {
 6             var blob = response.data;
 7             var img = document.getElementById("codeNum1");
 8             document.getElementById("yzm_token").value = response.headers.yzm_token;
 9             img.onload = function (e) {
10               window.URL.revokeObjectURL(img.src);
11             };
12             img.src = window.URL.createObjectURL(blob);
13           }
14         );

原生态自己写：

 1     function generatedCode1(){
 2       var xmlhttp;
 3       xmlhttp = new XMLHttpRequest();
 4       xmlhttp.open("GET", "https://localhost:44357/api/YZM", true);
 5       xmlhttp.responseType = "blob";
 6       xmlhttp.onload = function () {
 7         if (this.status == 200) {
 8           var blob = this.response;
 9           var img = document.getElementById("codeNum1");
10           document.getElementById("yzm_token").value = this.getResponseHeader("yzm_token");
11           img.onload = function (e) {
12             window.URL.revokeObjectURL(img.src);
13           };
14           img.src = window.URL.createObjectURL(blob);
15         }
16       }
17       xmlhttp.send();
18     }

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

安装

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