Django集成Firebase手机号验证报Host match not found如何解决

Host match not found错误提示

使用Django开发类Uber模式配送应用，集成Firebase Messaging功能后，输入手机号发送验证码时固定返回错误：

Host match not found

已尝试配置域名白名单但问题未解决，相关实现代码如下：

<!--Phone Number Input-->
<b class="text-secondary">Phone Number</b><br />
<div class="card bg-white mt-2 mb-5">
    <div class="card-body ">

        <div id="recaptcha-container"></div>

        <div id="get-code" class="input-group mb-3 {% if request.user.customer.phone_number %} d-none {% endif %}">
            <label>
                <input type="text" class="form-control" placeholder="Your phone number">
            </label>
            <div class="input-group-append">
                <button class="btn btn-warning" type="button">Send code</button>
            </div>
        </div>

        <div id="verify-code" class="input-group mb-3 d-none">
            <label>
                <input type="text" class="form-control" placeholder="Verification code">
            </label>
            <div class="input-group-append">
                <button class="btn btn-success" type="button">Verify code</button>
            </div>
        </div>

        <div id="change-phone"
            class="input-group mb-3 {% if not request.user.customer.phone_number %} d-none {% endif %}">
            <label>
                <input type="text" class="form-control" disabled value="{{ requeat.user.customer.phone_number }}">
            </label>
            <div class="input-group-append">
                <button class="btn btn-warning" type="button">Change</button>
            </div>
        </div>
    </div>
</div>

<script>

    function onVerify(idToken) {
        var form = document.createElement("form");
        form.method = "POST";

        var element1 = document.createElement("input");
        element1.name = "id_token";
        element1.value = idToken;
        form.appendChild(element1);

        var element2 = document.createElement("input");
        element2.name = "action";
        element2.value = "update_phone";
        form.appendChild(element2);

        var element3 = document.createElement("input");
        element3.name = "csrfmiddlewaretoken";
        element3.value = "{{ csrf_token }}";
        form.appendChild(element3);

        document.body.appendChild(form);
        form.submit();

    }

    window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
        'size': 'invisible'
    });

    $("#get-code button").on('click', function () {
        const phoneNumber = $("#get-code input").val();
        console.log(phoneNumber);

        firebase.auth().signInWithPhoneNumber(phoneNumber, window.recaptchaVerifier)
            .then((confirmationResult) => {
                // SMS sent. Prompt user to type the code from the message, then sign the
                // user in with confirmationResult.confirm(code).
                console.log(confirmationResult);
                window.confirmationResult = confirmationResult;

                $("#get-code").addClass("d-none");
                $("#verify-code").removeClass("d-none");

            }).catch((error) => {
                // Error; SMS not sent
                toast(error.message, 'error');
            });

    });

    $("#verify-code button").on('click', function () {
        const code = $("#verify-code input").val();

        confirmationResult.confirm(code).then((result) => {
            // User signed in successfully.
            const user = result.user;
            console.log(user.phoneNumber);

            user.getIdToken().then(function (idToken) {
                onVerify(idToken);
            });
        }).catch((error) => {
            // User couldn't sign in (bad verification code?)
            toast(error.message, 'error');
        });
    });

    $("#change-phone button").on('click', function () {
        $("#change-phone").addClass("d-none");
        $("#get-code").removeClass("d-none");
    })
</script>

按优先级依次排查修复：

• 修正Firebase授权域名配置
  进入Firebase控制台的Authentication-Settings-Authorized domains页面，把当前访问服务的域名全部加入列表：本地开发要加localhost和127.0.0.1两个，线上部署加实际服务域名，不要带http/https前缀、不要带端口号。添加完成后按Ctrl+F5硬刷新页面清缓存再测试。
• 修正手机号格式
  Firebase手机号验证要求传入的号码必须符合E.164格式，即带+国家码前缀，比如中国手机号需要传+8613xxxxxxxxx。当前代码直接取输入框内容没有拼接国家码，会触发校验异常，可以在输入框前增加国家码选择控件，或者根据服务面向区域固定拼接对应国家码。
• 修正模板语法错误
  代码中手机号回显部分的模板变量拼写错误：{{ requeat.user.customer.phone_number }}里的requeat改为request，否则模板渲染失败会导致页面JS初始化异常。
• 检查reCAPTCHA配置
  确认Firebase控制台中reCAPTCHA的密钥配置正确，不要额外手动引入reCAPTCHA的JS脚本，Firebase Auth SDK会自动加载对应资源，重复引入会导致域名校验冲突。

内容的提问来源于stack exchange，提问作者de-lvin