接下来的JS React-Query API调用使用USEQUERY（）在客户端上工作，但是在服务器上的GetServersIdeProps中，等效的API调用不适

Question

我正在尝试使用下一个JS getServersideProps中的React查询从后端服务器获取数据。这是获取数据的功能：

export const getGoogleAuthUrl = async () => {
  const res = await fetch(`${process.env.NEXT_PUBLIC_EXTERNAL_API_URL}/get-url`)
  return await res.json();
}

这是我的getserversideprops代码：

export async function getServerSideProps(context) {

  const queryClient = new QueryClient();
  await queryClient.prefetchQuery('getGoogleAuthUrl', getGoogleAuthUrl);

  // Pass data to the page via props
  return { 
    props: { 
      dehydratedState: dehydrate(queryClient)
    } 
  }
}

在我的控制台中，我会收到以下错误： fetcherror：http：// backend-server/api/get-url原因无效JSON响应主体：

如果我尝试记录脱水在JSON中的意外令牌P >在客户端中，通过将其作为道具传递，我在这样的状态数组中什么也没有得到：

{mutations: Array(0), queries: Array(0)}

现在，如果我在客户端使用useQuery进行相同的API调用，我会得到正确的响应，没有否错误。这是我在客户端称呼的方式：

export default function GetUrl({ dehydratedState }) {
  // The dehydrated state from the getServerSideProps being logged as empty because it 
  // encounters an error and returns nothing
  console.log(dehydratedState);

  // API call with react-query useQuery method

  const {
    isLoading,
    error,
    data
  } = useQuery('googleAuthUrl', getGoogleAuthUrl);


  if(isLoading) return <p>Loading...</p>
  if(error) return <p>Error: {error.message}</p>
  if(data) console.log(data); //Logs correct data to the console

  return (
    <>
      Get Url from server
    </>
  )
}

Answer 1

您的问题可能与您尝试访问的 API 的配置方式有关。

最有可能的是，他们使用可疑的用户代理字符串或非住宅 IP 地址来阻止流量。许多第三方 API 这样做是为了防止系统滥用。谷歌对此尤其严格。

我要么尝试欺骗用户代理字符串来看看是否可以解决它，要么接受它作为由于 API 的安全限制而需要在客户端加载的数据。