360極速浏覽器以及360安全浏覽器在相容模式下驗證碼圖檔顯示不來，但是極速模式可以顯示？

問題

最近遇到一個驗證碼出不來的問題，在360極速浏覽器以及360安全浏覽器在相容模式下驗證碼圖檔顯示不來，效果如下：

這個驗證碼的代碼元素如下，是一張圖檔，由接口提供的一個圖檔連結，傳回的是檔案流。

原因

我找了一個其他網址，發現在360極速浏覽器以及360安全浏覽器在相容模式下驗證碼圖檔可以顯示出來

這個驗證碼的代碼元素如下，是一張 base64 的圖檔

于是我猜想是不是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;
})