Nuxt•3d ago

Lowercase Authorization header

When calling our microservice with `$fetch(url, { headers: { Authorization: 'Bearer xyx' } }), the header interpreted by the microservice ends up as lowercase. Is there anyway to prevent the header from being lowercased?

2 Replies

kapa.ai•3d ago

Hi @thorne51. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources provided, there isn't specific information about preventing headers from being lowercased when using $fetch in Nuxt. However, I can provide some relevant information and a potential workaround. In Nuxt, the $fetch utility is based on ofetch, which is designed to be consistent across different environments. The lowercasing of headers might be a default behavior to ensure consistency. As a workaround, you could try using a custom fetcher or interceptor to set the headers. Here's an example of how you might create a custom fetcher: Docs > Guide > Recipes > Custom useFetch (https://nuxt.com/docs/guide/recipes/custom-usefetch) provides a way to create a custom fetcher:

export default defineNuxtPlugin((nuxtApp) => {
  const api = $fetch.create({
    onRequest({ request, options }) {
      // note that this relies on ofetch >= 1.4.0 - you may need to refresh your lockfile
      options.headers.set('Authorization', `Bearer ${yourToken}`)
    },
  })

  return {
    provide: {
      api
    }
  }
})

export default defineNuxtPlugin((nuxtApp) => {
  const api = $fetch.create({
    onRequest({ request, options }) {
      // note that this relies on ofetch >= 1.4.0 - you may need to refresh your lockfile
      options.headers.set('Authorization', `Bearer ${yourToken}`)
    },
  })

  return {
    provide: {
      api
    }
  }
})

This custom fetcher allows you to set headers directly using the set method, which might preserve the case of the header. Alternatively, you could try using useRequestFetch as mentioned in Docs > Api > Composables > useRequestFetch (https://nuxt.com/docs/api/composables/use-request-fetch), which forwards the request context and headers for server-side fetch requests. If these approaches don't solve the issue, you might need to investigate further or consider adjusting your microservice to handle both uppercase and lowercase header names. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

<@229918754069282818> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Lowercase Authorization header