验证码模块实现碰到的坑

在实现登录模块时，在验证码这里碰到一个坑就是：

问题：后台nodjs 生成一张svg的验证码图片并且返回到前端，并且把验证码放入到session中。

但是前台验证的时候验证码死活都不成功。

排查原因，百度后发现是因为浏览器请求后台nodejs 验证码接口时产生了跨域，而恰好前台是直接调用的验证码接口，没有经过代理路径去请求跨域接口，所以导致虽然验证码图片请求到并成功显示【img src 直接写 验证码接口路由！！！】，但是session的存储失败，

倒是输入的验证码和session中的undefined的captcha 比较，所以一直提示验证码失败。

解决方案：

　　定义验证码请求接口处理函数，请求经过 配置的路径去实现跨域。

　　

 proxyTable: { //web-cli 脚手架 创建的vue项目中的 config/index.js 中配置
            '/api': { // 匹配所有以 '/api'开头的请求路径
                target: 'http://localhost:4000', // 代理目标的基础路径
                changeOrigin: true, // 支持跨域
                pathRewrite: { // 重写路径: 去掉路径中开头的'/api'
                    '^/api': ''
                }
            }
        }, //代理设置

import ajax from './ajax'//自定义异步请求函数
const BASE = '/api'//配置的代理路径
export const getCaptcha = () => ajax(`${BASE}/captcha`)

 由于后台返回的是 svg编码资源，直接展示失败，于是还需要将svg代码转成图片资源，然后js赋值给 img标签的src属性！！

async changeCaptcha () {
      const cpa  = await getCaptcha() //定义的异步请求验证码处理函数
      var svg = new Blob([cpa], {type: "image/svg+xml;charset=utf-8"}); //将cpa===》这个svg编码 放到 Bolb中 使用 Blob 创建一个指向类型化数组的URL

　　　　var DOMURL = self.URL || self.webkitURL || self;
　　　　//ref=‘cha’放在一个img标签中
       this.$refs.cha.src = DOMURL.createObjectURL(svg)// 会产生一个类似 blob:d3958f5c-0777-0845-9dcf-2cb28783acaf 这样的URL字符串 【MDN WEB docs 中的解释】

      // 你可以像使用普通 URL 那样使用它，比如用在 img.src 上。

}