使用 NextJS + Auth0 传递查询参数或正文？

Question

所以，我对 next 和 JS 的一般知识和我的 Auth0 知识一样非常少。 我想知道是否有人可以建议如何将查询参数或请求正文传递给下面的第一个代码块？

我知道我可以向fetch函数添加一个正文，但是当我尝试在下面的/pages/profile块中执行此操作时，它似乎中断了请求。

更好的办法是让这个函数成为某种通用函数，我可以传入路由、方法和主体，因为无论如何所有路由都会受到保护。

任何帮助将不胜感激。

/pages/api/my/user

import { getAccessToken, withApiAuthRequired } from '@auth0/nextjs-auth0';

export default withApiAuthRequired(async function shows(req, res) {
  try {
    const { accessToken } = await getAccessToken(req, res, {
      scopes: ['profile']
    });
    const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/my/user`, {
      headers: {
        Authorization: `Bearer ${accessToken}`
      },
    });

    const shows = await response.json();

    res.status(200).json(shows);
  } catch (error) {
    res.status(error.status || 500).json({ error: error.message });
  }
});

这是获取上述内容的片段： /pages/profile

  const [state, setState] = useState({ isLoading: false, response: undefined, error: undefined });

  useEffect(() => {
    callApi();

  }, []);

  const callApi = async () => {
    setState(previous => ({ ...previous, isLoading: true }))

    try {
      const response = await fetch(`/api/my/user`);
      const data = await response.json();
      
      setState(previous => ({ ...previous, response: data, error: undefined }))
    } catch (error) {
      setState(previous => ({ ...previous, response: undefined, error }))
    } finally {
      setState(previous => ({ ...previous, isLoading: false }))
    }
  };

  const { isLoading, response, error } = state;

Answer 1

看不到您的实际问题在哪里 - 这是一个通常对我有用的片段：提供标题和正文作为选项变量的参数，添加 url，你很高兴。 const res = await fetch(url, options)

const protocol = 'https'
const hostname = 'YOURHOSTNAME'
const queryParams = `foo=bar`
const body = []
const url = `${protocol}://${hostname}/api/${endpoint}?${queryParams}`;
    const options = {
        headers: {
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': `${hostname}`, // set as needed
        },
        body: body,
        method: 'POST', 
    };
const res = fetch(url, options);

希望这可以帮助