使用getAccessTokenWithPopup获取access_token时遇Service not found错误求助

尝试在Layout.js中调用getAccessTokenWithPopup()获取access_token，但未成功获取到token，触发错误：

Error: Service not found: http://localhost:8000
具体报错信息：Uncaught (in promise) Error: Service not found: http://localhost:8000 at new OAuthError2 (errors.tsx:9:11)

前端整体运行正常，但不清楚问题所在，求帮助。

相关代码 #

main.js #

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { Auth0Provider } from "@auth0/auth0-react";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <Auth0Provider
      domain="dev-fpc4abpe4idt658a.us.auth0.com"
      clientId="9dJ0MOrpMbIOIqV7NqSda3X8PusCyrWm"
      authorizationParams={{
        redirect_uri: "http://localhost:5173",
      }}
      audience="http://localhost:8000"
      scope="openid profile email"
    >
      <App />
    </Auth0Provider>
  </React.StrictMode>
);

Layout.js #

import React, { useContext, useEffect } from "react";
import Header from "../Header/Header";
import Footer from "../Footer/Footer";
import { Outlet } from "react-router-dom";
import { useAuth0 } from "@auth0/auth0-react";
import UserDetailContext from "../../context/UserDetailContext";
import { useMutation } from "react-query";
import { createUser } from "../../utils/api";

const Layout = () => {
  const { isAuthenticated, user, getAccessTokenWithPopup } = useAuth0();
  const { setUserDetails } = useContext(UserDetailContext);

  const { mutate } = useMutation({
    mutationKey: [user?.email],
    mutationFn: () => createUser(user?.email),
  });

   useEffect(() => {
    const getTokenAndRegsiter = async () => {
      console.log("trying to get the token")
      const res = await getAccessTokenWithPopup({
        authorizationParams: {
          audience: "http://localhost:8000",
          scope: "openid profile email",
        },
      });
      console.log("token is : ",res);
      localStorage.setItem("access_token", res);
      setUserDetails((prev) => ({ ...prev, token: res }));
      mutate(res)
    };


    isAuthenticated && getTokenAndRegsiter();
  }, [isAuthenticated]);

  return (
    <>
      <div style={{ background: "var(--black)", overflow: "hidden" }}>
        <Header />
        <Outlet />
      </div>
      <Footer />
    </>
  );
};

export default Layout;

解决方法 #

这个错误的核心原因是Auth0后台未配置你指定的audience（即http://localhost:8000），或配置不匹配，按以下步骤排查修复：

1. 检查并创建Auth0 API配置

   • 登录Auth0管理后台，进入「APIs」页面
   • 确认是否存在标识符为http://localhost:8000的API，没有的话点击「Create API」：
     • 填写API名称（比如Local Dev API）
     • 标识符严格填写http://localhost:8000（和代码中的audience完全一致）
     • 签名算法选择RS256，保存配置

2. 验证API权限设置

   • 进入已创建的API页面，在「Settings」标签下确认标识符和代码一致，注意大小写、斜杠等细节
   • 检查「Allowed Token Audiences」是否包含你的客户端ID（9dJ0MOrpMbIOIqV7NqSda3X8PusCyrWm），开发环境可临时设置为允许所有

3. 优化代码细节

   • getAccessTokenWithPopup的参数中，无需重复openid profile email（这些是ID Token的scope），只需保留audience即可，若有API专属scope再添加
   • 修正useEffect的依赖数组，避免闭包问题：

     useEffect(() => {
       // 原有逻辑
     }, [isAuthenticated, user, mutate]);
     

4. 清除缓存测试

   • 清除浏览器缓存或打开无痕模式重新测试，避免旧认证信息干扰

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