Django Recaptcha（v2）-在由Ajax渲染的模态中使用验证码

Question

所以我使用了这个包： https://github.com/praekelt/django-recaptcha

我在基于AJAX的列表视图中使用渲染模态：

{% for object in object_list %}
<div id="offer-{{ object.id }}" class="modal fade services-modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content shadow">
            <div class="offer-box">
                <div class="offer-box-head">
                    <div class="offer-slider">
                        <div class="swiper-wrapper">
                            {% if object.gallery.all %}
                            {% for item in object.gallery.all %}
                            {% thumbnail item.photo "800x530" crop="center" as img %}
                            <div class="swiper-slide"><img src="{{ img.url }}" alt="offer image"></div>
                            {% endthumbnail %}
                            {% endfor %}
                            {% else %}
                            <div class="swiper-slide"><img src="{% static 'img/blank.png' %}" alt="offer image"></div>
                            {% endif %}
                        </div>

                        <div class="offer-pagination-prev left-arrow">
                            <span class="ti-angle-left"></span>
                        </div>

                        <div class="offer-pagination-next right-arrow">
                            <span class="ti-angle-right"></span>
                        </div>
                    </div>
                    <span class="offer-box-price">{{ object.price|floatformat:2 }} PLN</span>
                    {% if object.featured %}
                    <span class="offer-box-label"><span class="ti-star"></span>Polecane</span>
                    {% endif %}
                </div>
                <div class="offer-content pl-30 pr-30">
                    <span class="h4 offer-box-title">{{ object.offer_type }} {{ object.surface|floatformat }}m2</span>
                    <span class="offer-box-location"><span
                            class="ti-location-pin"></span>{{ object.locality }}: {{ object.street }} </span>
                    {% if object.year_built %}
                    <span class="offer-box-meta">{{ object.year_built }}</span>
                    {% else %}
                    <span class="offer-box-meta">Brak daty zbudowania</span>
                    {% endif %}
                    <a class="close" data-dismiss="modal"><span class="ti-close"></span></a>
                    <div class="contact-form mt-60">
                        <form method="post" action="{% url 'confirm_mail' %}">
                            {% csrf_token %}
                            <div class="form-group">
                                {{ form_mail.author.errors }}
                                <label for="{{ form.author.id_for_label }}">Autor</label>
                                {{ form_mail.author }}
                            </div>

                            <div class="form-group">
                                {{ form_mail.email.errors }}
                                <label for="{{ form.email.id_for_label }}">Email</label>
                                {{ form_mail.email }}
                            </div>

                            <div class="form-group">
                                {{ form_mail.telephone.errors }}
                                <label for="{{ form.telephone.id_for_label }}">Telefon</label>
                                {{ form_mail.telephone }}
                            </div>

                            <div class="form-group">
                                {{ form_mail.message.errors }}
                                <label for="{{ form.message.id_for_label }}">Wiadomość</label>
                                {{ form_mail.message }}
                            </div>

                            <div class="col-md-7">

                            </div>
                            <div class="col-md-2">
                                <div class="form-group grecaptcha">
                                    {{ form_mail.captcha }}
                                </div>
                            </div>

                            <input type="hidden" name="offernumber" id="id_offernumber"
                                   value="{{ object.offer_number }}">

                            <button type="submit" id="submit" name="submit"
                                    class="btn btn-primary">Wyślij
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endfor %}
{% endif %}

我这样做：

function ButtonAjax(){
    $('[id^="pag_btn_"]').click(function(e){
        e.preventDefault();
        let url = offer_list_url;
        base_array = GetBaseDataArray();
        additional_array = {
            'button_page': $(this).val(),
            'request_type': 'Button',
        }
        data_array = $.extend(base_array, additional_array);
        $.ajax({
            type: "POST",
            url: url,
            data: data_array,
            cache: false,
            success: function(data){
                $('#big-list').html(data);
                UpdateURL(data);
            },
            complete: function(){
                ButtonAjax();
                SwiperReload();
            }
        });
    });
}

但是，我在用ajax重新加载页面并使用此验证码创建新表单时遇到此错误：

  

recaptcha__pl.js：529未捕获的DOMException：使用   访问跨域框架的原始“ https://www.google.com”。       在RR.wE.xl（https://www.gstatic.com/recaptcha/api2/v1542004393985/recaptcha__pl.js:529:376）       毫升（https://www.gstatic.com/recaptcha/api2/v1542004393985/recaptcha__pl.js:533:272）       在Object.init（https://www.gstatic.com/recaptcha/api2/v1542004393985/recaptcha__pl.js:542:44）       在https://www.google.com/recaptcha/api2/bframe?hl=pl&v=v1542004393985&k=6Ley7XsUAAAAAOkmsN1CVThsgorMxXLI7eqLc_Sp&cb=ocue9ieaiij1:184:30

我尝试添加Django CORS，但没有帮助。这似乎是我在这里发现的相同问题： https://github.com/google/recaptcha/issues/121

我尝试了太多不同的解决方案，但我不知道该如何解决。 解决我所想到的问题的一种方法是刷新启用/禁用模态显示/隐藏的重新捕获，或者仅渲染一个验证码，然后（以某种方式）在每个模态显示中替换它。

如果有人要求，这是google recaptcha的v2版本。