yisibell / nuxt-proxy-request

A http proxy module for nuxt(3) powered by h3-proxy.

nuxt-proxy-request

A http proxy module for nuxt(3) powered by h3-proxy .

• ✨  Release Notes

Why use this module?

• See this issue Error when starting a Project using "http-proxy-middleware" with "npm run start" #15608.

Features

• Support for both development and production environments.
• Almost the same API as nuxt-proxy that using http-proxy-middleware, But this module using h3-proxy .
• Support Typescript.

Quick Setup

1. Add nuxt-proxy-request dependency to your project

# Using pnpm
pnpm add -D nuxt-proxy-request

# Using yarn
yarn add --dev nuxt-proxy-request

# Using npm
npm install --save-dev nuxt-proxy-request

2. Add nuxt-proxy-request to the modules section of nuxt.config.ts

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

That's it! You can now use nuxt-proxy-request in your Nuxt app ✨

Options

Key	Type	Default value	Description
options	object/Array<object>	[]	Configure which targets you want to proxy. ⚠️ TIPS: More config object please see h3-proxy's Options, You can pass an array of options for multiple targets or pass an object of options for single target.

⚠️ Do not when the value of a certain configuration item is a function type ⚠️

1. Do not use runtimeConfig.proxy for configuration, as the function type value in the runtimeConfig object will be ignored. Please use proxy for configuration as it has undergone special processing on the internal implementation.

2. Do not use any external variables within the function body.

import foo from 'foo'

export default defineNuxtConfig({
  modules: [
    'nuxt-proxy-request'
  ],
  proxy: {
    options: [
      {
        target: 'http://www.example.com',
        pathFilter: function(path, req) {
          console.log(foo) /* At runtime, foo is undefined. */

          return path.match(/^\/api/) && req.method === 'GET';
        },
        pathRewrite: {
          '^/api': ''
        }
      }
    ]
  }
})

3. Do not use RegExp literal, using new RegExp() instead, in function body.

4. Do not use Single-Line Comments, using Multiple-Line Comments instead, in function body.

If the above points cause you trouble. You can use h3-proxy directly. See how to use h3-proxy in Nuxt3 Project.

Development

# Install dependencies
pnpm install

# Generate type stubs
pnpm run dev:prepare

# Develop with the playground
pnpm run dev

# Build the playground
pnpm run dev:build

# Run ESLint
pnpm run lint

# Run Vitest
pnpm run test
pnpm run test:watch

# Release new version
pnpm run release

nuxt-proxy-request's Issues

How to send all non-declared paths to a specific target (catchall principle)

Hi,

I try to use the proxy to send the trafic in 4 directions :
1- Send some trafic to domain 1 for several paths
2- Send some trafic to domain 2 for several paths
3- Send all trafic to domain 3, except for some explicitly excluded paths : homepage / + /blog/**
4- Implicit (Not declarative) routing, to send the rest ( homepage / + /blog/** ) to be managed by the Nuxt Application itself

But when i configure the proxy like this,
I see that, any Path which is not declared explicitly is sent to the Nuxt app (with a 404)
But I would like those paths to be managed by my "domain 3".

Example : when I go to : "/path-3-random" (not declared in the proxy)
I would expect domain-3.com to be used, but this is my nuxt app who is used.
And because I have no internal route for this in Nuxt : I have a 404.

Note : I want to avoid to declare explictly all the paths that my domain-3.com can manage.

Any ideas ?
Hope to be clear enough.
Thanks for any input guys.

proxy: {
    options: [
      // Catch Some / Path 1
      {
        target: "https://domain-1.com",
        changeOrigin: true,
        pathFilter: [
          "/path-1a/**",
          "/path-1b/**",
        ],
      },
     // Catch Some / Path 2
      {
        target: "https://domain-2.com",
        changeOrigin: true,
        pathFilter: [
          "/path-2a/**",
          "/path-2b/**",
        ],
      },      
      // Catch all Except Exclusions
      {
        target: "https://domain-3.com",
        changeOrigin: true,
        pathFilter: [
          '!/blog/**',
          '!/**'
        ],
      },
    ],
  },

Vercel Proxy Issue

I'm using a proxy in my nuxt local environment, which I was hoping to deploy to Vercel. API call works nicely on my localhost, but when deployed to Vercel, I get a 403 Forbidden error. API key is all fine.

nuxt.config.js:

  proxy: {
    options: [
      {
        target: 'https://apiurl.ai/api/inference',
        pathFilter: ['/api**'],
        pathRewrite: {
          '^/api': ''
        }
      }

When doing a POST request on Vercel I get the error:

[403] - POST https://myapp.vercel.app/api?access_token=xxxxxx&model_id=RR6lMmw

Unsure if this is a Vercel issue or a nuxt proxy request issue?

Any help would be great.

Is is possible to intercept the headers of a request?

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?

👋