Nuxt3中设置接口代理

如何配置？

1.渲染模式为客户端渲染时

Nuxt3 最新的正式版使用了nitro做为 dev server, 在其官方文档中，有说明如何配置代理:

{
  devProxy: {
    '/proxy/test': 'http://localhost:3001',
    '/proxy/example': { target: 'https://example.com', changeOrigin: true }
  }
}

我们需要将该配置代理的选项放置到 nuxt.config.ts 文件的 nitro 选项中，如下：

export default defineNuxtConfig({
  // ...other setting
  server: false, // 不开启服务端渲染
  nitro: {
    devProxy: {
      "/api": {
        target: "http://localhost:3001", // 这里是接口地址
        changeOrigin: true,
        prependPath: true,
      },
    },
  },
});

该方式针对服务端渲染的场景也能生效，但是仅会针对发生在客户端测的请求进行代理。比如设置了server: false或者因为一些交互行为而触发的网络请求。

const { data: userinfo } = await useFetch("/api/userinfo", {
  server: false,
});

2.渲染模式为服务端渲染或者预渲染时

当我们必须得在服务端进行渲染且也需要对服务端的请求进行代理转发的话，上述方法配置是不可行的。笔者寻遍全网，发现很多解决方案是安装一些Nodejs的第三方库去实现接口代理的。其实没有必要，笔者在nitro的官方文档中找到了方案，即配置routeRules参数。

export default defineNuxtConfig({
  // ...other setting
  server: true //开启服务端渲染或者预渲染
  
  nitro: {
    devProxy: {
      "/api": {
        target: "http://localhost:3001", // 这里是接口地址
        changeOrigin: true,
        prependPath: true,
      },
    },
    // 该配置用于服务端请求转发
    routeRules: {
      '/api/**': {
        proxy: 'http://localhost:3001/**'
      }
    }
  },
})

踩坑记录

1. 配置 vite 的代理不生效

从 RC12 开始，vite 的代理配置就不再被支持了。下述配置方法将不再可用。

  vite: {
    server: {
      proxy: {
        '/api': {
          target: 'http://localhost:8080',
        },
      },
    },
  },

2. 服务端请求代理配置不生效

routeRules中支持配置 proxy 必须要在 Nuxt3.2 版本才能生效

转载来源：SegmentFault，仅用于学习，不涉及商业目的。

博客原创地址：Nuxt3实战系列之接口的请求代理配置

欢迎读者朋友们批评指正。

联系作者：imwty2023（微信），iwhitney@163.com（邮箱）