Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

291
Vistas
Display an XML file in Nuxt

I retrieved the sitemap file in xml dynamically from a url. I created a special view to display the contents of the file. In this page, I'm using axios to call the url and fetch the content.

First I've created an axios plugin

export default function ({ $axios, error: nuxtError }, inject) {
  // Create a custom axios instance
  const xml = $axios.create({
    headers: {
      common: {
        'Content-Type': 'application/xml',
        'Accept': 'application/xml'
      }
    }
  })
  // If there is an error, this part of code will catch it and it will be handled by nuxt
  xml.onError((error) => {
    nuxtError({
      statusCode: error.response ? error.response.code : error.status,
      message: error.message
    })
    return Promise.resolve(error)
  })

  // Inject to context as $xml
  inject('xml', xml)
}

Then a sample vue page with an asyncData method

async asyncData({ $xml,$loader }: any) {
    // Initiate XML file content
    let xml!: string
    // Getting location sitemap's data
    const sitemap: any = await $loader.getSiteMap()
    if (sitemap?.resources) 
      // Get the xml file content
      xml = await $xml.$get(sitemap.resources.secure_url)
    return {
      xml
    }
  }

<template>
  <div>
    <pre>{{ xml }}</pre>
  </div>
</template>

The content is retrieved as a character string and not as an xml file. this is normal because when I check the content-type in my browser I find that it is text/html.

In the response detail got from axios, the content is clearly xml and not string

 headers: {
    connection: 'keep-alive',
    'content-length': '2233',
    'content-disposition': 'attachment; filename="sitemap.xml"',
    'content-type': 'application/xml',
    etag: 'W/"effe5154abe7b53448d1f0b170119529"',
    'last-modified': 'Wed, 19 Jan 2022 16:23:03 GMT',
    date: 'Thu, 20 Jan 2022 11:03:30 GMT',
    vary: 'Accept-Encoding',
    'strict-transport-security': 'max-age=604800',
    'cache-control': 'public, no-transform, immutable, max-age=2592000',
    'server-timing': 'fastly;dur=2;cpu=1;start=2022-01-20T11:03:30.276Z;desc=hit,rtt;dur=17',
    server: 'Cloudinary',
    'timing-allow-origin': '*',
    'access-control-allow-origin': '*',
    'accept-ranges': 'bytes',
    'access-control-expose-headers': 'Content-Length,Content-Disposition,ETag,Server-Timing,Vary'
  }

I don't know how I can force to change the content-type of only this page or find a way to better interpret the xml file

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda