yisibell/nuxt-proxy-request

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

Hi there 👋

I'm yisibell, a frond-end engineer ❤❤❤!

• 🚀 I use daily:

Template projects

• ✔️ A admin template built by vue(3) + element-plus + vite: vue3-admin-starter
• ✔️ A Nuxt(3) app project template: nuxt3-app-starter
• ✔️ A Nuxt(2) app project template: nuxt-app-starter
• ✔️ A Next(12) app project template: next-app-starter
• ✔️ A Notification Service API built by NestJS: my-notification-service
• ✔️ A universal app starter based on Expo + React Native + Typescript + Native base UI: expo-app-starter
• ✔️ A Flutter Simple App template: flutter-app-starter
• ✔️ A blog template built by vuepress: aidol

JavaScript libraries

• A countdown bar library for web app: vcjs-dev/countdownbar
• A modern progress bar for web APP. Featuring realistic trickle animations to convince your users that something is happening!: trickling
• A modern pagination bar library for web app: paginationbar/paginationbar
• A image enlarger library for web app: vcjs-dev/enlarger
• A star-score library for web app: vcjs-dev/starscore
• A tiny tool that can make img area responsive: img-map-area
• A canvas watermark builder: mymark
• A tiny pagination function util: pagein
• A tiny websocket client: myws

Vue plugins

• A composition wrapper for vue(2), vue-router(3) and vuex(3): vue-composition-wrapper
• A previewable image component for vue: vue-previewable-image
• A svg symbol icon component for vue: vue-symbol-icon

UI libraries

• A questionnaire survey ui library for Vue.js: aidol-questionnaire-ui

Vite plugins

• A vite plugin which can transform svg icon to vue component. Support custom svg color and size: vite-plugin-svg4vue

Nuxt modules

• A module for Nuxt(3) that allows you to use your own SVG icons as a component, url and raw text: nuxt-svg-icons
• A http proxy module for Nuxt(3) powered by h3-proxy: nuxt-proxy-request
• A Nuxt(2) module to persist vuex state with cookie: nuxt-persiststate-with-cookie
• A Nuxt(2) module for using svg sprite icon: nuxt-symbol-icons

H3 event handler

• A http proxy event handler for h3, using proxyRequest: h3-proxy

SVG optimize

• A collection of SVGO plug-ins: svgo-extra

CSS utility

• A CSS toolkit class compiled by sass: toolkitcss

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/**',
          '!/**'
        ],
      },
    ],
  },

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?

👋

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.