Hi,
I'm using react-player and I call an http api that sends me videos in different formats.
I'd like to make a proxy so I don't get mixed content errors once the application is deployed.
I've made a first version of a proxy but the player makes lots of requests that return 404s.

import { NextRequest, NextResponse } from "next/server";

export async function GET(req: NextRequest) {
  const { searchParams } = new URL(req.url);
  const url = searchParams.get("url");

  if (!url) {
    return NextResponse.json(
      { error: "Missing URL parameter" },
      { status: 400 }
    );
  }

  try {
    const response = await fetch(url);

    if (!response.ok) {
      return NextResponse.json(
        { error: "Failed to fetch the video" },
        { status: response.status }
      );
    }

    const data = await response.body;
    return new NextResponse(data, {
      status: 200,
      headers: {
        "Content-Type":
          response.headers.get("Content-Type") ?? "application/octet-stream",
      },
    });
  } catch (error) {
    console.error("Error fetching video:", error);
    return NextResponse.json(
      { error: "Internal Server Error" },
      { status: 500 }
    );
  }
}