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

最新文章

  1. What is Away3D
  2. js ajax php分页组件
  3. kafka配置参数
  4. PHP redis 批量操作
  5. 后端码农谈前端(CSS篇)第八课:继承与层叠
  6. CentOS用yum安装、配置MariaDB
  7. NEC学习 ---- 布局 -三列, 左右定宽,中间自适应
  8. JavaScript关闭窗口的方法
  9. [刷题]算法竞赛入门经典(第2版) 5-10/UVa1597 - Searching the Web
  10. [Linux]ln -al输出内容解析
  11. Hibernate缓存策略(一级缓存和EHcache二级缓存)
  12. Python的命名空间及作用域
  13. 在浏览器中输入url回车之后会发生什么
  14. TiDB 部署及数据同步
  15. java编程之常见的排序算法
  16. php如何优化压缩的图片
  17. spark[源码]-DAG调度器源码分析[二]
  18. OpenSSL和https原理
  19. 第十篇 Python的字符串格式化
  20. bzoj 1101 zap 莫比乌斯

热门文章

  1. [CSS Flex] Justify-content
  2. 微信管理系统基于Flask+Vue+Celery+SQLAlchemy+Redis等实现
  3. DbVisualizer的使用
  4. 前端,Java,产品经理,微信小程序,Python等资源合集大放送
  5. [HTML5] Focus management using CSS, HTML, and JavaScript
  6. js如何遍历表单所有控件
  7. 并发新特性—Executor 框架与线程池
  8. 写bug-free 的code
  9. BZOJ1297 迷路 - 矩阵的幂
  10. C# TimeSpan 时间计算