Nuxt3 反向代理配置

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

最优处理方法

nuxt.config.ts

代码语言：txt复制

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，会使页面首屏加载时，请求错误。

代码语言：txt复制

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

nuxt.js nuxtjs3nuxt3 nuxt3反向代理 nitro nuxt3配置

0 人点赞