Is is possible to intercept the headers of a request?

[TimGuendel]

Hello,

With http-proxy-middleware I was able to intercept headers of a request and change them before sending them in the proxy. Unfortunately, http-proxy-middleware does not work in prod mode with Nuxt 3.7.2, so I stumled upon this module here.

Can I achieve the same with nuxt-proxy-request?

👋

[yisibell]

Sure! Just use configureProxyRequest option:

export default defineNuxtConfig({
  modules: [
    'nuxt-proxy-request'
  ],
  proxy: {
    options: [
      {
        target: 'http://www.example.com',
        pathFilter: ['/api/**'],
        pathRewrite: {
          '^/api': ''
        },

        // the param `event` is H3Event
         configureProxyRequest: function(event) {
              // return your custom options of proxyRequest
              return {
                headers: {
                   // Add some req headers
                }
              }
         }

        }
    ]
  }

})

more details pls see h3-proxy

[yisibell]

Do not use any imports, in nuxt-proxy-request, the function type option is only copied from the source code.

import foo from 'foo'

{
 configureProxyRequest: function(event) {
   const someValue = foo() // Invalid, an error will be reported.
  return {
    // ...
  }
 }
}

[TimGuendel]

I am not sure how to implement this. This is how I used to do it. How to I conditionally add headers?

const apiProxyMiddleware = createProxyMiddleware({
    // [...]
    on: {
        proxyReq: (proxyReq, req, res) => {
            const token = getToken();
            if (token) {
                proxyReq.setHeader('token', token);
            }
        },
    }
})

🤔

[yisibell]

I am not sure how to implement this. This is how I used to do it. How to I conditionally add headers?

const apiProxyMiddleware = createProxyMiddleware({
    // [...]
    on: {
        proxyReq: (proxyReq, req, res) => {
            const token = getToken();
            if (token) {
                proxyReq.setHeader('token', token);
            }
        },
    }
})

🤔

// event.node.req.headers
{
 configureProxyRequest(event) {
  const headers = event.node.req.headers

  console.log(headers) //Existing `headers`

  // some logic...

  return {
    headers: {
      token: 'set here'
   }
  }
 }
}

[TimGuendel]

I tried that, but this error shows up:

[yisibell]

I tried that, but this error shows up:

Implement this part inside the configureProxyRequest function.

const token = getToken()

Due to the use of JSON.stringify, the code was only copied.

[TimGuendel]

I did not even call getToken(). The error happens with your example code:

configureProxyRequest(event) {
    const headers = event.node.req.headers

    console.log(headers) //Existing `headers`

    // some logic...

    return {
        headers: {
            token: 'set here'
        }
    }
}

[yisibell]

I did not even call getToken(). The error happens with your example code:

configureProxyRequest(event) {
    const headers = event.node.req.headers

    console.log(headers) //Existing `headers`

    // some logic...

    return {
        headers: {
            token: 'set here'
        }
    }
}

There is indeed a problem. I will fix it as soon as possible, or you can directly use h3-proxy.

[TimGuendel]

How do I use h3-proxy with Nuxt? I tried with a plugin, but I am getting errors with this:

nuxtApp.vueApp.use(eventHandler(proxyEventHandler));

[yisibell]

I tried that, but this error shows up:

I had fixed it in v1.7.0

{
      configureProxyRequest: function (event) { // Do not use `configureProxyRequest() {}`
          console.log(event.node.req.headers)
          return {
            headers: {
              token: 'set some token value',
            },
          }
        },
}

retry above code.

[TimGuendel]

With 1.7.0 I am getting this:

[nitro 09:46:08]  ERROR  RollupError: 'import' and 'export' may only appear at the top level (Note that you need plugins to import files that are not JavaScript)

 8:         const runtimeOptions = [].concat(useRuntimeConfig().proxy?.options)[0 ?? 0]
 9:
10:         export default createProxyMiddleware(defu(runtimeOptions, buildtimeOptions))
            ^
✔ Nitro built in 563 ms

[yisibell]

With 1.7.0 I am getting this:

[nitro 09:46:08]  ERROR  RollupError: 'import' and 'export' may only appear at the top level (Note that you need plugins to import files that are not JavaScript)

 8:         const runtimeOptions = [].concat(useRuntimeConfig().proxy?.options)[0 ?? 0]
 9:
10:         export default createProxyMiddleware(defu(runtimeOptions, buildtimeOptions))
            ^
✔ Nitro built in 563 ms

pls show me your code.

[TimGuendel]

    proxy: {
        options: [
            {
                target: process.env.BACKEND_URL as string,
                pathFilter: ['/api/**'],
                pathRewrite: {
                    '^/api': ''
                },
                configureProxyRequest: function (event) { // Do not use `configureProxyRequest() {}`
                    console.log(event.node.req.headers)
                    return {
                        headers: {
                            token: 'set some token value',
                        },
                    }
                },
            }
        ]
    },

[yisibell]

    proxy: {
        options: [
            {
                target: process.env.BACKEND_URL as string,
                pathFilter: ['/api/**'],
                pathRewrite: {
                    '^/api': ''
                },
                configureProxyRequest: function (event) { // Do not use `configureProxyRequest() {}`
                    console.log(event.node.req.headers)
                    return {
                        headers: {
                            token: 'set some token value',
                        },
                    }
                },
            }
        ]
    },

remove the Single-Line Comments // Do not use configureProxyRequest() {} .

[yisibell]

How do I use h3-proxy with Nuxt? I tried with a plugin, but I am getting errors with this:

nuxtApp.vueApp.use(eventHandler(proxyEventHandler));

See https://github.com/yisibell/h3-proxy#nuxt