Django rest framework: Смешанное содержание

Я совсем новичок в Django rest framework. У меня есть проект, который содержит Django restframework API внутри проекта Django site (с простым кодом frontend), и он отлично работает в моем локальном окружении. Однако в производственном домене (HTTPS) он отображается следующим образом:

Mixed Content: The page at 'https://<my production domain>/audience/labeling_jobs/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://<my production domain>/audience/labeling_jobs/api/jobs/?page=2'. This request has been blocked; the content must be served over HTTPS.

Я настроил конфигурацию SSL/HTTPS согласно документу Django SSL/HTTPS, но все равно получил эту ошибку.

 USE_X_FORWARDED_HOST = True
 SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')
 SESSION_COOKIE_SECURE = True
 CSRF_COOKIE_SECURE = True

 SECURE_CONTENT_TYPE_NOSNIFF = True
 SECURE_HSTS_INCLUDE_SUBDOMAINS = True
 SECURE_HSTS_PRELOAD = True
 SECURE_SSL_REDIRECT = True

Похоже, что Django rest не может получить правильный HTTPS, но он работает нормально с другими путями django, они могут быть показаны на странице производства.

Есть ли что-то, что я упустил?

РЕДАКТИРОВАТЬ: Ниже приведен код, который запрашивает django rest api: функция пытается показать данные django labeling_jobs через restframework API, и пейджинг.

{% block custom_script %}
    <script type="module">
        const Jobs = {
            data() {
                return {
                    job_api_url: '{% url "labeling_jobs:api-job-detail" %}',
                    data: '',
                    next_page_url: null,
                    previous_page_url: null,
                }
            },
            mounted() {
                this.getJobs()
            },
            computed: {
                jobs() {
                    return this.data.results
                }
            },
            methods: {
                async getJobs(url) {
                    url = url ? url : this.job_api_url
                    const response = await axios.get(url)
                    this.data = await response.data
                    this.next_page_url = this.data.next
                    this.previous_page_url = this.data.previous
                },
                next_page() {
                    console.log(this.next_page_url)
                    if (this.next_page_url) {
                        this.getJobs(this.next_page_url)
                    }
                },
                previous_page() {
                    console.log(this.previous_page_url)
                    if (this.previous_page_url) {
                        this.getJobs(this.previous_page_url)
                    }
                }
            }
        }
        const app = Vue.createApp(Jobs)
        app.config.compilerOptions.delimiters = ['[[', ']]']
        app.mount('#wrapper')
    </script>
{% endblock %}

Я устранил эту проблему, добавив <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> в голову base.html и добавив следующий конфиг в settings.py :

USE_X_FORWARDED_HOST = True
SECURE_PROXY_SSL_HEADER = ('X-FORWARDED-PROTO', 'https')
SESSION_COOKIE_SECURE = True
CSRF_COOKIE_SECURE = True

SECURE_CONTENT_TYPE_NOSNIFF = True
SECURE_HSTS_INCLUDE_SUBDOMAINS = True
SECURE_HSTS_PRELOAD = True

И он может показать содержимое, отправив правильный HTTPS url без перенаправления на неправильное доменное имя HTTP.

Но я все еще думаю, что это не лучший ответ, я погружусь в пагинацию django restframework, возможно, с относительными url, чтобы попытаться получить что-то более надежное.

Вернуться на верх