Mixed Content: The page at 'https://page.com' was loaded over HTTPS, but requested an insecure
XMLHttpRequest endpoint 'http://page.com?filter=xxxx'.
This request has been blocked; the content must be served over HTTPS.
If you add a trailing slash (/) in your API requests it will fix the problem BUT a much easier solution is to the correct proxy headers for Uvicorn. They should look something like this:
upstream api_server {
server ${API_HOST}:${API_PORT} fail_timeout=0;
}
...
server {
...
location ~ /api/ {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $server_name;
proxy_pass http://api_server;
}
See the following resources:
Failure to load any static files when deploying with HTTPS
fastapi-react nginx.conf
Add option for adding a trailing slash automatically
Ajax Product Filter does not work in https - Fixed