I have a SSR todo app that I can run the app properly at localhost with no issue but when I deployed to the Truenas Scale, it couldn’t call the API when getting the data using getServerSideProps();

Everything is fine, and the network/port is set correctly, so the request is sent to the app server without issue.

But whatever I use Axios instance or call Axios directly in the method, the same error throws:

Error logs in truenas pod:

2024-05-01 21:38:09.420583+08:00Listening on port 50001
2024-05-01 21:39:29.909934+08:00[2024-May-01 13:39:29] - [INFO]: App init, fetch data from DB
2024-05-01 21:39:29.910995+08:00[2024-May-01 13:39:29] - [INFO]: call url: http://kenny-remote.ddns.net:50001/todo/todoList
2024-05-01 21:39:32.979784+08:00[2024-May-01 13:39:32] - [ERROR]: connect EHOSTUNREACH 58.176.231.31:50001
2024-05-01 21:39:32.980032+08:00[2024-May-01 13:39:32] - [INFO]: undefined
2024-05-01 21:39:32.982865+08:00TypeError: Cannot read properties of undefined (reading 'data')
2024-05-01 21:39:32.982898+08:00at getServerSideProps (/app/.next/server/pages/index.js:1095:41)
2024-05-01 21:39:32.982974+08:00at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
2024-05-01 21:39:32.982997+08:00at async Object.renderToHTML (/app/node_modules/next/dist/server/render.js:508:20)
2024-05-01 21:39:32.983040+08:00at async doRender (/app/node_modules/next/dist/server/base-server.js:687:38)
2024-05-01 21:39:32.983079+08:00at async cacheEntry.responseCache.get.isManualRevalidate.isManualRevalidate (/app/node_modules/next/dist/server/base-server.js:796:28)
2024-05-01 21:39:32.983111+08:00at async /app/node_modules/next/dist/server/response-cache/index.js:80:36

my code:

export async function getServerSideProps() {
  logger.info("App init, fetch data from DB");
  logger.info(`call url: http://${process.env.HOST_NAME}:50001/todo/todoList`)
  
  const todoList = await axios.get(`http://58.176.231.31:50001/api/todo/todoList`)
    .catch(err => logger.error("Error to init app, fetch data fail:", err)
    ) || []; // no error log was print

  // const completedList = await http.get('todo/completedList') || [];
  logger.info(todoList.data);
  return {
    props: {
      initialTodos: {
        todoList: todoList.data.data,
        // completedList: completedList.data.data,
        completedList:[]
      },
    },
  };
}

CORS config in:
next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  // reactStrictMode: true,
  swcMinify: true,
  output: 'standalone',
  async headers(){
    return [
      {
        // Routes this applies to
        source: "/api/(.*)",
        // Headers
        headers: [
          // Allow for specific domains to have access or * for all
          {
            key: "Access-Control-Allow-Origin",
            value: "*",
            // DOES NOT WORK
            // value: process.env.ALLOWED_ORIGIN,
          },
          // Allows for specific methods accepted
          {
            key: "Access-Control-Allow-Methods",
            value: "GET, POST, PUT, DELETE, OPTIONS",
          },
          // Allows for specific headers accepted (These are a few standard ones)
          {
            key: "Access-Control-Allow-Headers",
            value: "Content-Type, Authorization",
          },
        ],
      },
    ];
  }
};

module.exports = nextConfig;

It was very strange. When I call the API directly through a browser, it returns a correct result with no error!
able to call API directly

It would be great if someone could help!

tried call with Axios instance, same result

const http = axios.create({
  baseURL: process.env.HOST_NAME === undefined ? 'http://localhost:50001/api/' : `http://${process.env.HOST_NAME}:50001/api/`
});

export default http;