从 ajax 中的 HttpResponse() 加载视图时出现混合内容错误

Mixed content error in loading a view from an HttpResponse() in ajax

本文关键字:混合 错误 容错 视图 中的 ajax HttpResponse 加载      更新时间:2023-09-26

首先,我确定代码中没有尾随http,我的nginx服务器没有明显的配置错误。我觉得这个问题很奇怪:

我得到了一个带有不同选项卡的主视图,每个选项卡都由 CBV 提供。例如,我用这个HTML代码调用company选项卡的内容:

<li class="">
<a href="{% url "staffpanel:companies:company_detail" company.pk %}" id='companyTab' data-toggle="tab">{% trans "Company" %}</a>
</li>

它自然地调用了这个加载在选项卡内容中的视图,<div id="tabContent"></div>以下代码:

class CompanyDetail(StaffPanelMixin, DetailView):
    model = Company
    template_name = "staffpanel/companies/_company.html"

和以下 js:

$('a[data-toggle="tab"]').on('show.bs.tab', function (event){
    var tab = $(event.target).attr("id");
    var action = $(event.target).attr("href");
    $.get(action, null, function( data ) {
        $("#tabContent").html( data );
    });
    return false;
});

在每个选项卡上,我可以将表单打开为模态块。此窗体调用更新 CBV,允许用户编辑选项卡中显示的对象。更新视图验证如下所示:

class CompanyUpdate(StaffPanelMixin, UpdateView):
     template_name = "staffpanel/companies/_company_form.html"
     model = Company
     form_class = CompanyUpdateForm
     def get_success_url(self):
         return reverse("staffpanel:companies:company_detail",
                        args=(self.object.pk,))

目前,一切都很好。如果表单无效,则数据将以模态块中包含的表单正确返回,并按预期显示带有消息错误的表单。多亏了这段代码:

$(document).on('submit', '#companyForm', function () {
    var form = $('#companyForm');
    var actionUrl = form.prop('action');
    var modal = $('#genericModal');
    ajaxform(new FormData(form[0]), modal, actionUrl);
    return false;
});
function ajaxform(formData, modal, actionUrl) {
    $.ajax({
        url: actionUrl,
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function (data) {
            if (($(".has-error", data).length != 0) || ($(".alert", data).length !=0 )) {
               $(".modal-content").html( data )
            }
            else {
                modal.modal('hide');
                $("#tabContent").html( data );
            }
        }
    });
}

问题伴随着成功消息。虽然它在无效形式的情况下工作正常,但它无法加载成功的 url 并引发混合内容错误并查找具有错误协议的视图。我正在使用SSL,它使用HTTP而不是HTTPS调用详细信息视图。

我必须精确地确定更新视图在更新数据时正确完成其工作。这确实是返回详细信息CBV的问题。

这是一个错误吗?我在js上做错了吗(肯定(?为什么 js 可以在一个案例(加载选项卡(而不是更新后加载详细的 CBV(因为这与调用的视图严格相同(?顺便说一下,为什么网址协议会改变?

注意:我试图在django设置中设置SECURE_PROXY_SSL_HEADER和SECURE_SSL_REDIRECT,但没有成功。(我陷入了无限重定向的循环中(。

看来我无法直接加载页面而不会遇到这种痛苦的混合内容问题(由于 HttpResponse(( 而更改 HTTP 中的 HTTPS(。

所以我的解决方案是返回一个包含success_url的 JsonResponse,然后我能够从js选项卡加载。

我在更新视图中覆盖了form_valid,如下所示:

 def form_valid(self, form);
      super().form_valid(form)
      return JsonResponse({'succes_url': self.get_success_url()})

在我的 ajax 调用中,我不得不替换这一行:

 $("#tabContent").html( data );

有了这个:

 $("#tabContent").load( data['success_url'] );

仅此而已。

希望这有帮助!