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