Next.js - getInitialProps 中的 axios 返回 404答案

【问题标题】：Next.js - axios in getInitialProps returns 404Next.js - getInitialProps 中的 axios 返回 404
【发布时间】：2021-03-14 02:04:49
【问题描述】：

为什么getInitialProps会导致axios抛出异常？当我在其他任何地方调用我的服务方法时，它工作正常。

export default function JobIndex({ jobPosts }: JobIndexProps) {
  return (
    <div>
      <ul>
        {jobPosts.map(jobPost => {
          return <li>{jobPost.title}</li>
        })}
      </ul>
    </div>
  )
}

JobIndex.getInitialProps = async (context): Promise<JobIndexInitialProps> => {
  const jobPosts = await JobPostService.list({ page: 1, perPage: 3 });
  return { jobPosts };
}

这是我的服务类：

export class JobPostService {
  static async list(request: JobPostListRequest): Promise<JobPostListItem[]> {
    const response = await axios.get('/api/job-posts', { params: request });
    return response.data as JobPostListItem[];
  }
}

这是堆栈跟踪：

Server Error
Error: Request failed with status code 404

This error happened while generating the page. Any console logs will be displayed in the terminal window.

Call Stack

createError
file: .../node_modules/axios/lib/core/createError.js (16:15)

settle
file: .../node_modules/axios/lib/core/settle.js (17:12)

IncomingMessage.handleStreamEnd
file: .../node_modules/axios/lib/adapters/http.js (244:11)

IncomingMessage.emit
events.js (327:22)

endReadableNT
_stream_readable.js (1327:12)

processTicksAndRejections
internal/process/task_queues.js (80:21)

【问题讨论】：

在服务器上axios.get('/api/job-posts'时需要完整的url，相对url不起作用。

标签： node.js reactjs axios next.js

【解决方案1】：

根据 HMR 的评论，我最终修改了我的服务方法，将绝对 url 和我的基本 url 作为环境变量包含在内。

export class JobPostService {
  static async list(request: JobPostListRequest): Promise<JobPostListItem[]> {
    const response = await axios.get(`${process.env.NEXT_PUBLIC_BASE_URL}/api/job-posts`, { params: request });
    return response.data as JobPostListItem[];
  }
}

【讨论】：