Nuxt3中怎么配置代理？只需三步！已在上线项目实践

在 Nuxt3 中配置代理：三步指南

在现代前端开发中，处理跨域请求是一个常见的需求。Nuxt3 提供了灵活的配置选项来帮助我们解决这个问题。本文将介绍如何在 Nuxt3 中配置代理，只需三步即可完成。

第一步：配置 runtimeConfig

首先，我们需要在 nuxt.config.ts 文件中配置 runtimeConfig，以便在客户端和服务端都能访问到代理地址。

export default defineNuxtConfig({
  runtimeConfig: {
    // 客户端服务端都可用
    // 代理地址1
    myProxyUrl: "http://example.com/",  
    // 代理地址2
    myWsProxyUrl: "http://example2.com/", 

    // 对客户端暴露的公共密钥
    public: {},
  },
});

这里我们定义了两个代理地址 myProxyUrl 和 myWsProxyUrl，分别用于不同的 API 请求。

第二步：创建 API 代理处理程序

接下来，我们需要创建一个 API 代理处理程序来捕获所有的 API 请求并将其代理到相应的地址。在 Nuxt3 中，我们可以在 server/api/ 目录下创建一个文件来处理这些请求。

// server/api/[...].ts
/**
 * @description: 可以捕获所有api路由并代理请求
 * @param {*}
 * @return {*}
 */
import { joinURL } from "ufo";

export default defineEventHandler(async (event) => {
  // 获取运行时配置中的代理地址
  let proxyUrl = useRuntimeConfig().myProxyUrl; 
  let path = event.path;
  
  // 根据路径选择不同的代理地址
  if (event.path.startsWith("/api/ws")) {
    proxyUrl = useRuntimeConfig().myWsProxyUrl;
    // 去掉 /api/ws 前缀
    path = event.path.replace(/^\/api\/ws\//, ""); 
  }

  // 构建目标 URL
  const target = joinURL(proxyUrl, path); 
  // 代理请求
  return proxyRequest(event, target);
});

在这个处理程序中，我们使用 useRuntimeConfig 来获取代理地址，并根据请求路径选择合适的代理地址。然后，我们使用 proxyRequest 方法将请求代理到目标 URL。

第三步：使用封装的请求方法

最后，我们可以在客户端使用封装的请求方法来发送 API 请求。例如，我们有一个登录 API 的封装方法 loginApi：

// clientPost是封装的请求方法
export const loginApi = (data: IAuthForm) => {
  return clientPost<ILoginData>("/api/login", {
    body: data,
  });
};

通过这种方式，我们可以在客户端发送请求时，自动使用配置好的代理地址。

总结

通过以上三步，我们可以在 Nuxt3 中轻松配置代理，解决跨域请求的问题。这种方法不仅灵活，而且易于维护。希望本文能帮助你在 Nuxt3 开发中更加得心应手。