js 跨域访问 获取验证码图片 获取header 自定义属性
2024-08-24 21:07:06
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();
}
最新文章
- What is Away3D
- js ajax php分页组件
- kafka配置参数
- PHP redis 批量操作
- 后端码农谈前端(CSS篇)第八课:继承与层叠
- CentOS用yum安装、配置MariaDB
- NEC学习 ---- 布局 -三列, 左右定宽,中间自适应
- JavaScript关闭窗口的方法
- [刷题]算法竞赛入门经典(第2版) 5-10/UVa1597 - Searching the Web
- [Linux]ln -al输出内容解析
- Hibernate缓存策略(一级缓存和EHcache二级缓存)
- Python的命名空间及作用域
- 在浏览器中输入url回车之后会发生什么
- TiDB 部署及数据同步
- java编程之常见的排序算法
- php如何优化压缩的图片
- spark[源码]-DAG调度器源码分析[二]
- OpenSSL和https原理
- 第十篇 Python的字符串格式化
- bzoj 1101 zap 莫比乌斯
热门文章
- [CSS Flex] Justify-content
- 微信管理系统基于Flask+Vue+Celery+SQLAlchemy+Redis等实现
- DbVisualizer的使用
- 前端,Java,产品经理,微信小程序,Python等资源合集大放送
- [HTML5] Focus management using CSS, HTML, and JavaScript
- js如何遍历表单所有控件
- 并发新特性—Executor 框架与线程池
- 写bug-free 的code
- BZOJ1297 迷路 - 矩阵的幂
- C# TimeSpan 时间计算