javascript - 在 Laravel 中实现 intlTelInput 的问题

Question

我正在使用下面的代码在纯 HTML/CSS 中使用 intlTelInput，它工作正常，您可以看到演示（intl-tel-input 示例）。

HTML 代码

<label for="phone" class="control-label">Mobile Phone Number</label><br/>
<input type="tel" class="form-control" id="phone" placeholder="">

Javascript代码

 <script>
 var input = document.querySelector("#phone");
intlTelInput(input, {
initialCountry: "auto",
geoIpLookup: function(success, failure) {
    $.get("https://ipinfo.io", function() {}, "jsonp").always(function(resp) {
        var countryCode = (resp && resp.country) ? resp.country : "";
        success(countryCode);
    });
},
utilsScript: "css/intl-tel-input-master/build/js/utils.js"
});

现在，我在 laravel 中使用相同的代码，它什么也没显示。你能告诉我如何解决这个问题吗？

获取https://ipinfo.io/?callback=jQuery1111094 …<em>1559198167627&=1559198167628 net::ERR_ABORTED 429

Answer 1

这可能为时已晚，但显然当您尝试在定义的主机上提供服务时，dev.com或者机器 IP 可能会解析error 429.

服务你的 Laravel 实例 ei：

$ php artisan serve --host=192.168.2.23

Answer 2

这与 Laravel 无关。如果你在 Laravel 之外尝试你的 javascript 代码，你应该会发现你得到了同样的错误。

429 TOO MANY REQUESTS
用户在给定的时间内发送了太多的请求（“速率限制”）。

429 错误表明您已超出 ipinfo.io API的请求限制。

查看 ipinfo.io 显示免费层每天最多只允许 1000 个请求。你能超过这个数量吗？

Answer 3

以供将来参考，这是答案

头标签中的链接

<link rel="stylesheet" href="{{ asset ('css/intl-tel-input/build/css/intlTelInput.css') }}"/>
<script src="{{ asset ('css/intl-tel-input/build/js/intlTelInput.min.js') }}"></script>

html代码

<input type="tel" id="phone" placeholder="">

脚本

<script>
var input = document.querySelector("#phone");
window.intlTelInput(input);
</script>