N
Nuxt•3mo ago
Yuri

Proxy files through server

Hello. I use for backend Strapi. I upload files there. I can download them by the link http://localhost:1337/uploads/passkeys_b3a66b3a99.zip But localhost:1337 is an internal domain and I don't want make it external. I need users can download file by nuxt domain (in dev it is http://localhost:3000). What is correct way to do it? When user fetch http://localhost:3000/uploads/passkeys_b3a66b3a99.zip Nuxt has to give the file from http://localhost:1337/uploads/passkeys_b3a66b3a99.zip
2 Replies
kapa.ai
kapa.ai•3mo ago
Hi @Yuri. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can proxy Strapi’s file URLs through your Nuxt app by adding a server route that forwards requests to Strapi. This way, users hit http://localhost:3000/uploads/... while Nuxt fetches from http://localhost:1337/uploads/.... In Nuxt 3, create a server route and stream the response: - server/routes/uploads/[...path].ts 
export default defineEventHandler(async (event) => {
  const path = event.context.params?.path || ''
  // Build the Strapi URL
  const target = `<http://strapi:1337/uploads/${path}`> // use your internal host; in dev might be <http://localhost:1337>

  // Proxy the request to Strapi
  return proxyRequest(event, target)
})
export default defineEventHandler(async (event) => {
  const path = event.context.params?.path || ''
  // Build the Strapi URL
  const target = `<http://strapi:1337/uploads/${path}`> // use your internal host; in dev might be <http://localhost:1337>

  // Proxy the request to Strapi
  return proxyRequest(event, target)
})
Notes: - Place this in server/routes to expose it without the /api prefix, so /uploads/<file> is handled by the route. [server dir] - If you run both services in Docker, the server-side request should target the Strapi container hostname (e.g., http://strapi:1337), not localhost, since “localhost” inside the Nuxt container refers to itself. [Retrieve API objects] - Using a Nitro proxy route like this is one of the recommended strategies for proxying backend resources in Nuxt. [Proxy your API] If you only need this in development, you could restrict the proxy to dev by checking process.dev and otherwise redirecting or denying. Alternative: If you prefer to keep /uploads under /api, use server/api/uploads/[...path].ts instead, which would expose /api/uploads/... by default. [server dir] ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@740173469404364872> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?