如何在 Next.js 中通过代理服务进行 API 请求处理-JavaScript中文网-JavaScript教程资源分享门户

介绍

Next.js 是一款基于 React 的服务器端渲染框架，可以让我们更加方便地构建高效的 Web 应用程序。在实际开发中，我们经常需要与外部 API 服务进行通信，如何在 Next.js 中进行 API 请求处理成为了一个很重要的问题。本篇文章将介绍如何在 Next.js 中通过代理服务进行 API 请求处理。

为什么需要代理服务？

虽然 Next.js 提供了 fetch() 和 axios 等工具处理 API 请求，但是由于某些原因，有些请求需要通过代理服务进行处理。比如我们需要请求一个需要 AccessToken 的 API，但是 AccessToken 是保存在客户端的 cookie 中，我们需要使用代理服务将 AccessToken 添加到请求头中。此时，可以使用 Node.js 的 http-proxy-middleware 模块来实现代理服务。

如何在 Next.js 中使用代理服务？

安装 http-proxy-middleware 模块

npm install http-proxy-middleware --save

在 pages/api 目录下创建一个 proxy.js 文件

// javascriptcn.com 代码示例
const { createProxyMiddleware } = require('http-proxy-middleware');

const options = {
  target: 'https://api.example.com',  // 需要代理的服务器地址
  changeOrigin: true,
  secure: false,
  cookieDomainRewrite: 'localhost'   // 设置 cookie 域名为 localhost
};

const proxy = createProxyMiddleware(options);

module.exports = (req, res) => {
  proxy(req, res);
};

在 pages/api 目录下创建一个 api.js 文件，用于处理真正的 API 请求

// javascriptcn.com 代码示例
export default async (req, res) => {
  const response = await fetch('http://localhost:3000/api/proxy/api', {
    method: req.method,
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${req.cookies.accessToken}`  // 从 cookie 中获取 AccessToken
    },
    body: req.body
  });
  
  const data = await response.json();
  res.status(response.status).json(data);
}

在上面的代码中，我们通过 http://localhost:3000/api/proxy/api 的方式访问代理服务，然后将 AccessToken 添加到请求头中，并将 API 请求发送到实际的 API 服务器上。最后，将 API 的返回结果返回给前端界面。

在页面的代码中发送 API 请求

// javascriptcn.com 代码示例
import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

const MyPage = () => {
  const { data: result, error } = useSWR('/api/api', fetcher);

  if (error) return <div>Failed to load</div>;
  if (!result) return <div>Loading...</div>;

  return <div>{result.msg}</div>;
};

export default MyPage;

在上面的代码中，我们通过使用 useSWR 来发送 API 请求，并从 API 返回的结果中取出 msg 字段。

总结

这篇文章介绍了如何在 Next.js 中通过代理服务进行 API 请求处理。通过代理服务，我们可以更加方便地与外部 API 服务进行通信，并实现一些特殊的处理逻辑。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654093f37d4982a6eba15ccc