next.js 下一篇:Clerk Auth Uncaught(in promise)错误:职员:加载职员失败

b4lqfgs4  于 2023-10-18  发布在  其他
关注(0)|答案(2)|浏览(145)

我一直在尝试为我的NextJS项目设置Clerk,但我一直有错误。我正在使用NextJS 13,应用程序目录在src文件夹中,Clerk中间件也位于src中。Firefox console error“(原因:CORS请求未成功)。状态代码:(null).",“Uncaught(in promise)Error:职员:加载职员失败”
我也无法从auth()/currentUser()获取用户信息,即使我正确登录,它也总是返回undefined。
我没能找到很多关于这个问题的帖子,但有些人提到:- ,,在Clerk网站上的项目设置中启用基于URL的会话同步,,但默认情况下该选项处于关闭状态。- 一个建议是禁用HTTPS无处不在,但我甚至没有它。
编辑:将浏览器更改为Edge,CORS问题消失了。我可以正确登录,但我仍然无法从Clerk访问currentUser()函数,我可以登录,但仍然接收undefined。

up9lanfz

up9lanfz1#

我不确定这是否有任何帮助,但我正在做一个next.js项目,我正确地设置了clerk,这是我的中间件.ts文件的内容,它位于根目录中:

import { withClerkMiddleware } from "@clerk/nextjs/server";
import { NextResponse } from "next/server";

export default withClerkMiddleware(() => {
  //console.log("middleware running...");
  return NextResponse.next();
});

export const config = {
  matcher: ["/(.*?trpc.*?|(?!static|.*\\..*|_next|favicon.ico).*)", "/"],
};

我对Clerk的一点了解来自Theo的视频(https://youtu.be/YkOSUVzOAA4?t=690),我认为他的视频版本的代码无法运行,我不得不使用这个版本的中间件来让用户使用Clerk进行身份验证。在那个应用程序中,据我所知,他不必使用currentUser()。

8e2ybdfx

8e2ybdfx2#

我用这个方法,似乎效果不错。希望对你有帮助:)

import { authMiddleware } from '@clerk/nextjs';
import createMiddleware from 'next-intl/middleware';
const locales = ['en', 'es', 'ca'];
const localesRoutes = locales.map((locale) => '/' + locale);
const publicRoutes = ['/', '/:locale/signup', '/:locale/signin'].concat(
    localesRoutes
);

const intlMiddleware = createMiddleware({
    // A list of all locales that are supported
    locales: locales,

    // If this locale is matched, pathnames work without a prefix (e.g. `/about`)
    defaultLocale: '',
    localeDetection: false,
});
export default authMiddleware({
    beforeAuth: (req) => {
        // Execute next-intl middleware before Clerk's auth middleware
        return intlMiddleware(req);
    },

    // Ensure that locale specific sign-in pages are public
    publicRoutes: publicRoutes,
});

export const config = {
    // Skip all paths that should not be internationalized. This example skips the
    // folders "api", "_next" and all files with an extension (e.g. favicon.ico)
    matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)'],
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

相关问题