Django rest framework: Mixed content - django

Question

I am quite new in Django rest framework. I have a project which contain Django restframework API inside a Django site project(with simple frontend code) and it works fine in my local environment. However in the production domain(HTTPS) it shows as below:
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.
I have setup the configuration about SSL/HTTPS according to Django document SSL/HTTPS beforehand but it still got this error.
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
It seems that the Django rest cannot get the correct HTTPS, but it works fine with other django paths, they can be showed on the production page.
Is there anything I have missed?
EDIT:
Below is the code which request the django rest api:
the function is trying to shows the django labeling_jobs data via restframework API, and paging.
{% 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 %}
EDIT 2
I found the problem is something related to the paging django restframework, when I place the API url on the browser with production host view them under django rest ui, it is OK, but it fails when I try to move to next page.

Answer 1

I have fixed this problem,
by adding <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> in the head of base.html and adding the following config in the 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
And it can show the contents by sending the correct HTTPS url without redirect to the wrong HTTP domain name.
But I still think it is not a best answer, I will dive into django restframework pagination maybe with relative url to try to get something more robust.