React-Query 获取时出现 404 Not Found Next.js 错误

Question

这是我的情况。我正在尝试建立一个带有 Express.js 后端的 Next.js 项目。根据 Next.js 文档，我确实将后端设置为常规后端而不是自定义服务器。所以我不确定我是否已经通过将后端设置为常规后端而犯了一个错误。我正在尝试使用 axios 从后端端点 http://localhost:3500/api/v1/list 获取数据，它运行良好。但是，当我尝试在第一次加载时实现 React-Query 时，我从后端获取了正确的数据，但是当它由于某种原因尝试重新获取时，它遇到了错误的端点 http://localhost:3600/api/v1/list并收到 404 Not Found 错误。看起来它正在将端口从 3500 切换到 3600，这是一个前端端口。在这里你会找到存储库的 link ，这是代码。如果我做错了什么，请告诉我，

page/sell.js

import axios from 'axios';
import { useQuery } from 'react-query';

export default function SellPage({ response }) {
  const { data, isLoading, error } = useQuery('sells', getPosts, {
    initialData: response,
  });

  console.log('data useQuery: ', data);

  if (isLoading) return 'Loading...';
  if (error) return error.message;
  return (
    <div>
      <p>Hello SellPage!!{data.message}</p>
    </div>
  );
}

export async function getServerSideProps(context) {
  const response = await getPosts();
  console.log('response', response);
  if (!response) {
    return {
      notFound: true,
    };
  }

  return {
    props: { response }, // will be passed to the page component as props
  };
}

async function getPosts() {
  console.log('HOST: ', process.env.HOST);
  const { data } = await axios.request({
    baseURL: process.env.HOST,
    url: '/api/v1/list',
    method: 'get',
  });
  return data;
}

_app.js

import React from 'react';
import { QueryClient, QueryClientProvider } from 'react-query';
import { ReactQueryDevtools } from 'react-query/devtools';

const queryClient = new QueryClient();

function MyApp({ Component, pageProps }) {
  const queryClientRef = React.useRef();
  if (!queryClientRef.current) {
    queryClientRef.current = new QueryClient();
  }
  return (
    <>
      <QueryClientProvider client={queryClientRef.current}>
        <Component {...pageProps} />
        <ReactQueryDevtools initialIsOpen={false} />
      </QueryClientProvider>
    </>
  );
}

export default MyApp;

Answer 1

如果你得到 404 我认为您已经联系了服务器，但没有 API 的名字匹配所以尝试先在邮递员或类似的人身上测试 API 但是如果 console.log('HOST: ', process.env.HOST); 打印 http://localhost:3600 然后执行以下操作在您的 .env 文件中尝试将 PORT 重命名为 SERVER_PORT 或其他

HOSTNAME=localhost
SERVER_PORT=3500
HOST=http://$HOSTNAME:$SERVER_PORT

我不确定，但也许你的前端服务 bash 保持 PORT env val 为 3600

Answer 2

我在你的 repo 中没有看到 next.config.js，所以我猜 env 变量没有捆绑在 js 中，最后你 url 看起来像 localhost: 或localhost:undefined 浏览器默认为您的客户端提供服务的端口。

尝试添加 next.config.js

module.exports = {
  env: {
    HOST: process.env.HOST,
  },
}

参见：https://nextjs.org/docs/api-reference/next.config.js/environment-variables

另一种方法是使用 public 运行时变量

module.exports = {
  publicRuntimeConfig: {
    // Will be available on both server and client
    port: 3500,
  },
};

// Then
import getConfig from 'next/config';

// Only holds serverRuntimeConfig and publicRuntimeConfig
const { publicRuntimeConfig } = getConfig();
console.log(publicRuntimeConfig.port);

参见：https://nextjs.org/docs/api-reference/next.config.js/runtime-configuration

但请注意，运行时配置会影响优化，最终您可能会得到更大的包，因此您可能想先尝试构建时间变量。

React-Query 获取时出现 404 Not Found Next.js 错误

404 Not Found Next.js error on React-Query fetch

javascript

reactjs

next.js

react-query