Is there a way to set custom http headers in the prismic javascript client?

[jgoddijn (Jorrit Goddijn)]

Hi There,

My organization requires me to run all http requests (and so also Prismics api requests) through a proxy.

This proxy requires me also to send a custom http header along with the http request.

Doest the prismic JS client support setting headers in anyway?

Thank you

[samlittlefair]

Hey @jgoddijn ,

When you initialize your Client, you can specify a few options. I'm not sure if any of them would be directly useful to you. When you initialize your Client, you can specify an options object:

const Prismic = require('prismic-javascript')
const endpoint = 'https://your-repo-name.cdn.prismic.io/api/v2'
const accessToken = "secret-access-token"
const Client = Prismic.client(endpoint, { accessToken })

The options object can accept these options:

• accessToken
• routes
• requestHandler
• req
• apiCache
• apiDataTTL
• proxyAgent
• time

The client is based on node-fetch, and proxyAgent refers to the agent option in that package. Let me know if that helps. (I'm not familiar with proxies, so this is just a guess.) If this doesn't address your use case, I can keep digging.

Best,
Sam

[jgoddijn (Jorrit Goddijn)]

The agent property does not support setting headers.
As far as I can see: HTTP | Node.js v16.1.0 Documentation

A working example would be highly appreciated!

[angeloashmore]

Hey @jgoddijn,

The requestHandler option may be a better fit for your needs. It allows you to provide a custom function to fetch content from the API. With this, you can alter the URL and set custom request options, like headers.

Here is a simple example:

const Prismic = require('@prismicio/client')
const fetch = require('cross-fetch')

const client = Prismic.client('https://your-repo.cdn.prismic.io/api/v2', {
  requestHandler: {
    request: async (url, callback) => {
      const res = await fetch(url, {
        headers: {
          Accept: 'application/json',
          ['X-Custom-Header']: 'header-value',
        },
      })
      const json = await res.json()

      const cacheControl = res.headers.get('cache-control')
      const parsedCacheControl = cacheControl
        ? /max-age=(\d+)/.exec(cacheControl)
        : null
      const ttl = parsedCacheControl
        ? parseInt(parsedCacheControl[1], 10)
        : undefined

      callback(null, json, res, ttl)
    },
  },
})

client.query('').then((res) => console.log(res))

In the example, you'll see we are setting a custom header named X-Custom-Header. The example also demonstrates that any fetch function can be used as long as you can call the callback function with the JSON result and the Response object. This allows you to modify the requested URL if necessary.

I'm not sure what your proxy needs are, but you should be able to modify the request property of the requestHandler option to do any kind of request interception needed.

Hope that helps!

Thanks,
Angelo