如果您运行 Next.js 应用程序并已经使用 axios 进行数据请求，那么您可能会遇到一些问题。这些问题可能源于 Next.js 的服务器端渲染或 axios 的配置。在本篇文章中，我们将探讨 Next.js 和 axios 如何一起工作，并解决一些常见的问题。
Next.js 中使用 axios
Next.js 是一个 React 框架，可以进行服务器端渲染。 axios 是一个流行的 JavaScript 库，用于在浏览器和服务器上执行 HTTP 请求。当这两个工具结合使用时，服务器端和客户端上的所有请求都将通过相同的 HTTP 客户端进行发送。 在 Next.js 应用程序中使用 axios , 需要在页面组件的 getInitialProps 函数中发送请求。
-- -------------------- ---- -------
------ ----- ---- --------
-------- ---------- ---- -- -
------ -
-----
--- ------ ---
------
--
-
------------------------ - ----- -- -- -
----- --- - ----- ------------------------------------------
----- - ---- - - ---------
------ - ---- --
--
------ ------- ---------这里，我们定义了一个函数 getInitialProps ，这是 Next.js 中特殊的函数之一。这个函数可以存储来自服务器的数据，并将这些数据传递到渲染的页面组件中。
但是，当您尝试运行这个函数时，可能遇到一些问题。
Next.js 中 axios 出现的问题和解决方案
1. 获取不到数据
如果您调用了 getInitialProps 函数，但是没有看到任何数据，那么很可能是因为服务器端请求被取消。在 Next.js 中，当页面被卸载时，所有未完成的请求都将被自动取消。解决此问题的方法是使用一个简单的参数：
import axios from 'axios';
SomePage.getInitialProps = async ({ req }) => {
const baseURL = req ? `${req.protocol}://${req.get('Host')}` : '';
const res = await axios.get(`${baseURL}/api/data`);
return { data: res.data };
};这里，我们使用服务器的基本 URL 和路由的基本 URL 来构建请求 URL. 然后我们从请求 URL 获取数据，并将其存储到组件的属性中。
2. 重复的请求
在 Next.js 中，浏览器和服务器上的请求是分别发送的。因此，如果您在页面组件中使用 axios 发送请求，您可能会看到两种请求，一种是服务器端请求，另一种是客户端请求。 解决方案是将 axios 配置为在服务器和客户端之间同步。在 axios 中，通过设置 baseURL 属性来实现。使用这种方法，您只需在应用程序中设置 baseURL 属性，就可以在服务器和客户端之间共享相同的请求。
-- -------------------- ---- ------- ------ ----- ---- -------- ----- --- - -------------- -------- ------------------- -- -------------------------- --- ------------------------ - ----- -- -- - ----- --- - ----- ----------------- ------ - ----- -------- -- -- ------ ------- ---------
这里，我们创建了一个 axios 实例，将其配置为根据 env 变量使用正确的 baseURL。然后，我们在组件的 getInitialProps 函数中使用实例来发送请求。
3. CORS 问题
CORS (跨域资源共享) 问题是发送跨域请求时最常见的错误之一。在本例中，如果您的应用程序和 API 不在同一个域上，您可能会遇到 CORS 问题。此时需要在 API 服务器上启用 CORS 支持。在 Express 中，可以使用 CORS 中间件来指定哪些域名或 IP 可以访问您的 API。
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());这里，我们使用 cors 中间件为我们的 Express 应用程序启用 CORS 支持。这样，浏览器就可以自由地访问我们的 API 了。
结论
axios 是一个非常有用的库，可以在 Next.js 应用程序中轻松地处理数据请求。但是，在使用中，我们可能会遇到一些问题，如服务器端请求的取消、重复请求和 CORS 问题。通过本文中提到的解决方案，您可以轻松地解决这些问题并使应用程序更加强大。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676f5d5be9a7045d0d72280b