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

Question

首先，我确定代码中没有尾随 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 调用详细信息视图。

我必须明确更新视图在更新数据时正确地完成它的工作。真是返回detail CBV的问题

这是一个错误吗？我在 js 上做错了吗（当然）？为什么 js 可以在案例中（加载选项卡）而不是在更新之后加载详细信息 CBV（因为这与调用的视图完全相同）？为什么 url 协议会顺便更改？

注意：我尝试在 django 设置中设置 SECURE_PROXY_SSL_HEADER 和 SECURE_SSL_REDIRECT 但没有成功。（我陷入了无限重定向的循环）。

Answer 1

看来我无法直接加载页面而没有这个令人痛苦的混合内容问题（由于 HttpResponse() 导致 HTTP 中的 HTTPS 更改）。

所以我的解决方案是 return 包含 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'] );

就是这样。

希望对您有所帮助！

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

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

javascript

django

jquery

tabs