一.读卡器的调用过程
1.本地客户端下载相关的读卡器的驱动包，里面已经写好了浏览器读卡身份证基本信息的demo信息。
2.将读卡器连接电脑，通常为USB接口插入即可，按照操作说明安装驱动信息。
3.解压下载的文件后先找到sdk里自带的测试工具测试读卡器是否正常工作，指示灯是否亮等。
4.放入二代身份证点击获取身份证信息按钮能获取到信息表示读卡器连接成功.
5.通过浏览器的访问demoHTML文件访问默认接口，读卡器放上有效身份证，点击按钮如果控件安装失败会有脚本报错信息，如果出现如下所示说明IE已经读取到身份证信息，接下来就是根据你实际的业务模块集成到你的web系统了。
二.问题反馈
近期有项目反馈该功能出问题了，需要在浏览器中通过读卡器设备读取身份证信息，使用谷歌打开，报了如下跨域问题
看错误信息为跨域问题。开始考虑问题原因，经过测试发现部分浏览器功能正常使用，没有出现跨域报错信息，换其他环境测试出现偶发现象。
三.问题定位
1.何为跨域
前后端不在同一个域就会存在跨域问题。
2.跨域原因
产生跨域的原因：浏览器，具体说是浏览器的“同源策略”。
浏览器的同源策略用于隔离潜在恶意文件的重要安全机制。
跨域产生的原因是下面三点：
1、浏览器的限制
2、跨域
3、请求是XHR（XMLHttpRequest）
现在跨域问题很常见，很多项目采用了前后端分离的模式进行开发的，前后端代码部署再不同的服务器上。
问题排查
刚开始想还是代码问题处理有bug，但该功能已正常使用一段时间，突然出现bug问题，还是外部环境因素较大，经过对比浏览器配置和版本信息，发现还是有很大差别的，考虑客户端版本的问题，应该是升级了谷歌浏览器后出现一些配置的问题。
四.问题解决
问题找到了，如何解决有多种方案，通常百度搜索解决浏览器跨域问题解决方案有很多。
1.浏览器配置变更，通过修改特定配置。
进入谷歌浏览器，在网址栏输入下方路径访问 chrome://flags/
找到关键字查询 Block insecure private network requests.
查询后，修改为“Disabled”，并Relaunch重新启动下，点击后会自动重启浏览器。重启后，就解决了此跨域问题。
但考虑到客户端的用户群体，这样的操作太过于负责，不推荐。
2.研发人员修改代码 JSONP实现
JSONP包含两部分：回调函数和数据。
回调函数是当响应到来时要放在当前页面被调用的函数。
数据就是传入回调函数中的json数据，也就是回调函数的参数了。
jsonp虽然很简单，但是有如下缺点：
1）安全问题(请求代码中可能存在安全隐患)
2）要确定jsonp请求是否失败并不容易
经过测试，身份证读取跨域问题得到解决。
总结
跨域问题在目前后端分离的架构中普遍存在，互联网中也有很多解决方案，虽然都能够解决跨域问题，但其实各有优劣。比如Jsonp方式实现起来较为简单，但只支持GET请求方式，在原生JavaScript脚本中使用方便，但是当利用了如Vue.js这种MVVM框架时就有些难以施展了。我们要在实际情形中比较分析，选择最合适的方案。
