使用Auth0获取JWT时提示“Service not found”错误求助

在通过Auth0调用JWT进行身份验证时，抛出错误："Service not found: http://localhost:8000"，无法获取token。已尝试过重写代码、更新所有依赖至最新版本，问题仍存在。

相关代码 #

Layout组件代码 #

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.js'

const Layout = () => {

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

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

    useEffect(() => {

        const getTokenAndRegister = async () => {
            const res = await getAccessTokenWithPopup({
                authorizationParams: {
                    audience: "http://localhost:8000",
                    scope: "openid profile email"
                }
            })
            localStorage.setItem("access_token", res)
            setUserDetails((prev) => ({ ...prev, token: res }));
            console.log(res)
        }

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

export default Layout

auth0Config.js代码 #

import {auth} from 'express-oauth2-jwt-bearer'

const  jwtCheck = auth({
    audience: "http://localhost:8000",
    issuerBaseURL: "my url)",
    tokenSigningAlg: "RS256"
})

export default jwtCheck

main.jsx代码 #

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="my domain)"
    clientId="rmy id)"
    authorizationParams={{
      redirect_uri: "http://localhost:5173"
    }}
    audience="http://localhost:8000"
    scope="openid profile email"
    >
    <App />
    </Auth0Provider>
  </React.StrictMode>
);

解决步骤 #

1. 确认Auth0控制台的API存在性

   • 登录Auth0后台，进入「APIs」页面，检查是否有标识符为http://localhost:8000的API。没有的话立即创建，标识符必须完全匹配。
   • 确保该API的签名算法设置为RS256，与后端配置一致。

2. 统一前后端audience参数

   • 前端Auth0Provider、getAccessTokenWithPopup，后端jwtCheck中的audience值必须完全一致，不能有拼写、大小写或格式差异。

3. 修正Auth0Provider配置结构

   • audience和scope应放在authorizationParams对象内，而非单独属性。修改后的配置示例：

     <Auth0Provider
       domain="你的Auth0域名"
       clientId="你的客户端ID"
       authorizationParams={{
         redirect_uri: "http://localhost:5173",
         audience: "http://localhost:8000",
         scope: "openid profile email"
       }}
     >
       <App />
     </Auth0Provider>
     

4. 修复后端issuerBaseURL

   • 后端jwtCheck中的issuerBaseURL必须是有效的Auth0域名，格式为https://你的Auth0域名/（末尾带斜杠），比如https://dev-xxxxxx.us.auth0.com/。

5. 调整getAccessTokenWithPopup调用时机

   • 确保user对象加载完成后再调用接口，避免user?.email为undefined。更新useEffect依赖数组：

     useEffect(() => {
       const getTokenAndRegister = async () => {
         if (!user) return;
         const res = await getAccessTokenWithPopup({
           authorizationParams: {
             audience: "http://localhost:8000",
             scope: "openid profile email"
           }
         });
         localStorage.setItem("access_token", res);
         setUserDetails((prev) => ({ ...prev, token: res }));
       };
     
       isAuthenticated && user && getTokenAndRegister();
     }, [isAuthenticated, user]);
     

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