nginx reverse proxy redirecing to http instead of https

I have a react spa hosted on a https connection created with certbot.And i fastAPI backend on http.I set up a reverse proxy, and on /api/ i proxy_pass the request to the fastAPI backend

I can login to the site, using the /api/auth/token url, but when trying to change page with a react router redirect.

i get the error: Blocked loading mixed active content “http://site.xyz/api/strategy/1”

as it is visible in the Response header of theGET /api/strategy/1 , the location of the backend is http, which it is, but is the reverse proxy not supposed to transmit the response as https with my current setup?

I dont think react router has anything to do with it but i included the code just to be sure

Response headers

HTTP/1.1 307 Temporary RedirectServer: nginx/1.24.0 (Ubuntu)Date: Wed, 08 Jan 2025 19:08:41 GMTContent-Length: 0Connection: keep-alivelocation: http://site.xyz/api/strategy/1

request headers

GET /api/strategy/1/ HTTP/1.1Host: site.xyzUser-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:133.0) Gecko/20100101 Firefox/133.0Accept: application/json, text/plain, */*Accept-Language: en-US,en;q=0.5Accept-Encoding: gzip, deflate, br, zstdAuthorization: bearer dsadasDNT: 1Connection: keep-aliveReferer: https://site.xyz/strategy/1Sec-Fetch-Dest: emptySec-Fetch-Mode: corsSec-Fetch-Site: same-originPragma: no-cacheCache-Control: no-cache

Nginx sites-available

server {    root /var/www/site.xyz/dist;    index index.html index.htm index.nginx-debian.html;    server_name site.xyz www.site.xyz;    location / {        try_files $uri /index.html;    }    location /api/ {        proxy_pass http://localhost:8080;          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-Proto $scheme;    }    listen [::]:443 ssl ipv6only=on; # managed by Certbot    listen 443 ssl; # managed by Certbot    ssl_certificate /etc/letsencrypt/live/site.xyz/fullchain.pem; # managed by Certbot    ssl_certificate_key /etc/letsencrypt/live/site.xyz/privkey.pem; # managed by Certbot    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot}server {    if ($host = www.site.xyz) {        return 301 https://$host$request_uri;    } # managed by Certbot    if ($host = site.xyz) {        return 301 https://$host$request_uri;    } # managed by Certbot    listen 80 default_server;    listen [::]:80 default_server;    server_name site.xyz www.site.xyz;    return 404; # managed by Certbot}

const router = createBrowserRouter([  {    path: "/",    element: (<ProtectedRoute><RootPage /></ProtectedRoute>    ),    errorElement: <NotFoundPage />,    children: [      {        index: true,        element: <HomePage />,      }, {        path: "data",        element: <DataPage />,      },      {        path: "strategy/:id",        element: <StrategyPage />,      },      {        path: "create-strategy",        element: <CreateStrategyPage />,      },    ],  },  {    path: "/login",    element: <LoginPage />,  },  {    path: "/signup",    element: <SignupPage />,  },  {    path: "*",    element: <NotFoundPage />,  },]);ReactDOM.createRoot(document.getElementById("root")!).render(<QueryClientProvider client={queryClient}><RouterProvider router={router} /><ReactQueryDevtools initialIsOpen={false} /></QueryClientProvider>);

Here is the component for Navigating to strategy/1

interface StrategyTableRowProps {  strategy: Strategy;  setLocalStrategyId: React.Dispatch<React.SetStateAction<number>>;}// TODO: fix the click propogation  export default function StrategyTableRow({ strategy, setLocalStrategyId }: StrategyTableRowProps) {  const navigate = useNavigate();  const queryClient = useQueryClient();  const { mutateAsync: deleteStrategy } = useDeleteStrategy();  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);  const handleOpen = () => {    navigate(`/strategy/${strategy.id}`);  };  const toggleDeleteModal = () => setIsDeleteModalOpen(!isDeleteModalOpen);  async function handleDelete(id: number): Promise<void> {    await deleteStrategy(id);    setLocalStrategyId(0);    queryClient.invalidateQueries({ queryKey: ["strategy", strategy.id] });    toggleDeleteModal();  }  return (<><div className="flex flex-row items-center justify-between"><div className="flex gap-2"><Button onClick={handleOpen}>Open</Button><Button variant="outline" onClick={toggleDeleteModal}>Delete</Button></div></div><Modal onClose={toggleDeleteModal} isOpen={isDeleteModalOpen} title="Delete Strategy"><p>Are you sure you want to delete the strategy?</p><div className="flex gap-2"><Button variant="default" onClick={() => handleDelete(strategy.id)}>Delete Strategy</Button></div></Modal></>  );}

I honestly dont know how to go on from here or how to debug so any help in that direction would be much appreciated