如何在Nuxt 3中代理img标签里的Directus图片URL？

要隐藏Directus的真实图片地址，核心是通过Nuxt的服务端转发资源请求，因为img标签是直接发起资源请求而非异步API请求，所以需要让前端的图片请求先走到Nuxt服务端，再转发到Directus。以下是两种可行方案：

方案1：用Nuxt Server Routes手动转发 #

在Nuxt的server目录下创建一个动态路由，专门处理图片请求的转发：

// server/assets/[...id].ts
export default defineEventHandler(async (event) => {
  // 获取图片ID参数
  const { id } = getRouterParams(event)
  // 拼接Directus的真实资源地址
  const directusAssetUrl = `https://mydirectus.com/assets/${id}`

  // 转发请求到Directus，保留原请求的headers（比如认证信息）
  return await $fetch(directusAssetUrl, {
    method: event.method,
    headers: event.headers,
    responseType: 'blob' // 确保返回二进制图片资源
  })
})

之后前端使用图片时，把原Directus地址https://mydirectus.com/assets/myImageId替换成/assets/myImageId即可，对外只会暴露你的前端域名。

方案2：用Nuxt代理模块自动转发 #

如果不想写自定义路由，可以使用@nuxtjs/proxy模块实现自动代理：

1. 先安装模块：

npm install @nuxtjs/proxy

2. 在nuxt.config.ts中配置代理规则：

export default defineNuxtConfig({
  modules: ['@nuxtjs/proxy'],
  proxy: {
    '/assets/': {
      target: 'https://mydirectus.com/assets/',
      changeOrigin: true,
      pathRewrite: { '^/assets/': '' } // 移除前端请求路径中的/assets前缀
    }
  }
})

配置完成后，前端请求/assets/myImageId会自动被代理到Directus的真实地址，效果和方案1一致。

额外处理：替换接口返回的图片URL #

从Directus接口获取的数据中，图片字段通常返回完整的Directus地址，需要把这些地址替换成前端的代理路径：

// 示例：获取并处理集合数据
const rawItems = await $fetch('/api/items')
const processedItems = rawItems.map(item => {
  // 假设item.image是Directus返回的图片URL
  if (item.image) {
    item.image = item.image.replace('https://mydirectus.com/assets/', '/assets/')
  }
  return item
})

权限注意事项 #

如果Directus的资源需要认证才能访问，在转发请求时要带上用户的认证token：
在方案1的路由中，可以从请求头中提取Authorization并转发：

const authHeader = event.headers.get('authorization')
return await $fetch(directusAssetUrl, {
  method: event.method,
  headers: {
    ...(authHeader && { authorization: authHeader }),
  },
  responseType: 'blob'
})

内容的提问来源于stack exchange，提问作者Posoroko