跟随T3 Stack教程时遭遇Clerk认证Failed to fetch/CORS错误求助

我正在跟随官方T3 Stack教程学习，目前在Clerk认证环节卡住。我将_app.tsx修改为如下代码：

import { type AppType } from "next/app";

import { api } from "~/utils/api";

import "~/styles/globals.css";
import { ClerkProvider, SignedIn, SignedOut, SignIn } from "@clerk/nextjs";

const MyApp: AppType = ({ Component, pageProps }) => {
  return (
      <ClerkProvider {...pageProps}>
        <Component {...pageProps} />
      </ClerkProvider>
  );
};

export default api.withTRPC(MyApp);

当访问本地主页http://127.0.0.1:3000/或http://localhost:3000/时，出现错误：Unhandled Runtime Error, TypeError: Failed to fetch。查看浏览器控制台，首要错误是CORS阻止，这导致Clerk完全无法工作。

使用的版本信息：

• "@clerk/nextjs": "^4.15.0"
• "next": "^13.2.4"
• "@types/node": "^18.15.5"
• "typescript": "^5.0.2"

我已尝试的解决方法：

• 搜索相关关键词未找到类似案例
• 清空项目重新开始，问题依旧
• 尝试从@clerk/react导入ClerkProvider
• 检查Clerk控制台的CORS设置，未找到有效配置项

请问我遗漏了什么？

内容的提问来源于stack exchange，提问作者Jax Cooper