0
点赞
收藏
分享

微信扫一扫

360极速浏览器以及360安全浏览器在兼容模式下验证码图片显示不来,但是极速模式可以显示?


问题

最近遇到一个验证码出不来的问题,在360极速浏览器以及360安全浏览器在兼容模式下验证码图片显示不来,效果如下:

360极速浏览器以及360安全浏览器在兼容模式下验证码图片显示不来,但是极速模式可以显示?_ios


这个验证码的代码元素如下,是一张图片,由接口提供的一个图片链接,返回的是文件流。

360极速浏览器以及360安全浏览器在兼容模式下验证码图片显示不来,但是极速模式可以显示?_ios_02

原因

我找了一个其他网址,发现在360极速浏览器以及360安全浏览器在兼容模式下验证码图片可以显示出来

360极速浏览器以及360安全浏览器在兼容模式下验证码图片显示不来,但是极速模式可以显示?_兼容模式_03


这个验证码的代码元素如下,是一张 base64 的图片

360极速浏览器以及360安全浏览器在兼容模式下验证码图片显示不来,但是极速模式可以显示?_ios_04

于是我猜想是不是360极速浏览器以及360安全浏览器在兼容模式下需要base64的图片才行,于是我将上面改成base64的尝试一下。

解决

有了上面的猜想方案,下面来实践一下

添加 ​​@/utils/blob.js​​ 文件

import axios from "axios";
// blob二进制 to base64
function blobToDataURI(blob, callback) {
let reader = new FileReader();
reader.onload = function (e) {
callback(e.target.result);
}
reader.readAsDataURL(blob);
}
// blob 二进制转 base64
export function blobToBase64(url, data, callback) {
axios({
method: "get",
url, // 请求地址
data, // 参数
responseType: "blob", // 表明返回服务器返回的数据类型
}).then(res => {
let blob = new Blob([res.data], { type: "iamge/png" });
console.log("blobToBase64---->", blob);
blobToDataURI(blob, (res) => {
console.log("res---->", res);
callback(res);
})
}).catch(err => {
console.log(err);
});
}

调用该方法:

// blob转base64
import { blobToBase64 } from "@/utils/blob.js";
blobToBase64(`/minstone-auth/imgcode?r=${Math.random()}`, null, (res) => {
this.codeSrc = res;
})

改完之后,就可以了。

360极速浏览器以及360安全浏览器在兼容模式下验证码图片显示不来,但是极速模式可以显示?_浏览器_05


举报

相关推荐

0 条评论