nginx reverse proxy redirecing to http instead of https - Stack Overflow

admin管理员组

文章数量:1127686

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 “/api/strategy/1”

as it is visible in the Response header of the GET /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 Redirect
Server: nginx/1.24.0 (Ubuntu)
Date: Wed, 08 Jan 2025 19:08:41 GMT
Content-Length: 0
Connection: keep-alive
location: /api/strategy/1

request headers

GET /api/strategy/1/ HTTP/1.1
Host: site.xyz
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:133.0) Gecko/20100101 Firefox/133.0
Accept: application/json, text/plain, */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br, zstd
Authorization: bearer dsadas
DNT: 1
Connection: keep-alive
Referer: /strategy/1
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin
Pragma: no-cache
Cache-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

本文标签： nginx reverse proxy redirecing to http instead of httpsStack Overflow