Nuxt3 反向代理配置

原创

KID.

发布于 2023-10-30 16:10:51

2K0

发布于 2023-10-30 16:10:51

文章被收录于专栏：Coooooooooode！（前端）

由于Nuxt的首屏服务端渲染，以及只有浏览器才受同源限制的问题，在面对跨域请求时，需要对客户端和服务端都进行代理

最优处理方法

nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  //   反向代理
  nitro: {
      // 用于客户端代理
    devProxy: {
      '/api': {
        target: 'https://xxx.com/api', // 这里是接口地址
        changeOrigin: true,
        prependPath: true
      }
    },
    // 该配置用于服务端请求转发
    routeRules: {
      '/api/**': {
        proxy: 'https://xxx.com/api/**'
      }
    }
  }
})

不配置routeRules 的话

请求数据时就可以写成,如果不配置routeRules，会使页面首屏加载时，请求错误。

const { data } = await useLazyFetch(
  '/api/xxxxx/xxx/xx',
  {
    // baseURL: process.server ? 'https://i.maoyan.com/api' : '', 如果不配置routeRules，兼容服务端与客户端请求可以这样写
  }
)

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

nuxt.js