Next.js 添加端口 80 以在 Google 认证后重定向 URL

Question

我正在使用 Nextjs 14 和 Supabase 后端创建一个 Web 应用程序。但是，身份验证成功后，我的 URL 上会附加端口 80，这会导致抛出错误。

认证后的URL如下所示：

https://product-url.com:80/?code=randomcode

这会导致 Chrome 抛出错误：

该网站无法提供安全连接

products-url.com 发送了无效的响应。

ERR_SSL_PROTOCOL_ERROR

但是，在我本地的开发环境中一切正常。 Web 应用程序部署在 Netlify 上。

我尝试手动将 url 中的 80 替换为 443，流程继续进行，没有出现错误。

我该如何解决这个问题？

重要文件：

中间件.ts：

import { createMiddlewareClient } from "@supabase/auth-helpers-nextjs";
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export async function middleware(req: NextRequest) {
  const res = NextResponse.next();

  // Create a Supabase client configured to use cookies
  const supabase = createMiddlewareClient({ req, res });

  // Refresh session if expired - required for Server Components
  await supabase.auth.getSession();

  return res;
}

认证逻辑：

  const [session, setSession] = useState("");

  const supabase = createClientComponentClient();
  const router = useRouter();

  useEffect(() => {
    const getSession = async () => {
      const { data } = await supabase.auth.getSession();
      setSession(data.session);
    };
    getSession();
  }, []);

  const handleGoogleAuthLogin = async () => {
    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: "google",
      options: {
        redirectTo: `${location.origin}/auth/callback`,
      },
    });
  };

  const handleGoogleAuthLogout = async () => {
    const { error } = await supabase.auth.signOut();
    // refresh page after user logout
    router.refresh();
    setSession("");
    // redirect user to the home page
    router.push("/");
  };

验证/回调：

import type { NextRequest } from "next/server";
import { NextResponse } from "next/server";
import { cookies } from "next/headers";
import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs";

export async function GET(request: NextRequest) {
  const requestUrl = new URL(request.url);
  const code = requestUrl.searchParams.get("code");

  if (code) {
    const supabase = createRouteHandlerClient({ cookies });
    await supabase.auth.exchangeCodeForSession(code);

    console.log("Url origin ==>", requestUrl.origin);

    return NextResponse.redirect(requestUrl.origin);
    // redirect user to the page they were before login
    // return NextResponse.redirect(new URL("/dashboard", requestUrl.origin));
    // redirects user to the dashboard page after login
    // return NextResponse.redirect(new URL("/dashboard", requestUrl));
  }
}

在supabase中，站点URL设置为https://product-url.com

重定向网址：

http://localhost:3000/**

https://--my_org.netlify.app/

https://生产-url.com/

Answer 1

经过几天的研究，我发现这是一个 Next.js 运行时的已知问题。目前还没有解决办法。