feat: support runtime proxy using route rules

[pi0]

🔗 Linked issue

#113

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Support runtime proxy using route rules and h3.proxyRequest (universally works with fetch)

{
  routeRules: {
    '/proxy/example': { proxy: 'https://example.com' },
    "/proxy/**": { proxy: '/api/**' },
  }
}

Local support is pending unjs/h3#321

For more advance usages, users can always create a route like routes/proxy/[...path].ts and directly use return proxyRequest(path, { target }) and have full control over path handling, etc.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[codecov]

Codecov Report

Merging #926 (9506781) into main (aa5a2f4) will increase coverage by 0.32%.
The diff coverage is 54.54%.

@@            Coverage Diff             @@
##             main     #926      +/-   ##
==========================================
+ Coverage   67.40%   67.73%   +0.32%     
==========================================
  Files          59       59              
  Lines        5968     5979      +11     
  Branches      668      678      +10     
==========================================
+ Hits         4023     4050      +27     
+ Misses       1936     1920      -16     
  Partials        9        9              

Impacted Files	Coverage Δ
src/options.ts	87.74% <37.50%> (-1.18%)	⬇️
src/types/nitro.ts	100.00% <100.00%> (ø)
src/rollup/config.ts	92.59% <0.00%> (+0.46%)	⬆️
src/rollup/plugins/externals.ts	94.32% <0.00%> (+1.17%)	⬆️
src/utils/index.ts	54.22% <0.00%> (+6.46%)	⬆️

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[yancyhuang]

Hi @pi0

Very wonderful feature!
BTW, does it support proxy web socket now? In ticket #113 you mentioned web socket proxy feature is on the way, not sure if it's released or not.

Thank you,
Yancy

[pi0]

@yancyhuang It is partially with devProxy options. We still need a unified layer for WS support in servers to make it happen.

[antlionguard]

Will path rewrite support come? Like devProxy.

rewrite: (path) => path.replace(/^\/api/, '')

or i'm missing something about this topic?

[pi0]

@antlionguard Something like this has same effect in route rules: "/proxied/api/**": "https://backend/**.

[jonkri]

We still need a unified layer for WS support in servers to make it happen.

Hi! 👋 Is there an issue that tracks this?

[blowsie]

@pi0 , Thanks for this.
Unless I missed something, whilst his feat is called "support runtime proxy using route rules", it only actually supports rules that are defined at build time.

Would it be possible to acheive something like this using variables?

export default defineNuxtConfig({
  routeRules: {
    '/api': { proxy: NUXT_API_PROXY },
  }
})

[pi0]

@blowsie For dynamic target, you should make a custom route handler and use sendProxy(event) utility. (please make an issue if wanted to know how, i might forget to respond here)

[imzedi]

@pi0, any way I can use the same for static build? (by ssr: false and "nuxt build --prerender)

[manniL]

@imzedi With a static build, you platform or reverse proxy has to handle that as no "nuxt/nitro" server is running ☺️

[pi0]

BTW depends on the static deployment platform. One of proxy via route rule advantages is that we can technically generate platform (or reverse proxy) config.

[manniL]

@pi0 e.g. for netlify you mean?

[pi0]

Yes like this we can use for static presets.

[imzedi]

Thanks @pi0 @manniL .
Got this whole point.
Anyhow we will need a server whether its CDN or serverless function provided by deployment platform or we manage our own.

[JoniLieh]

Hello, thanks for maintaining such an awesome library!
Is there support to proxy websockets like socket.io?
I'm using nuxt and this works, but not for websockets (even with ws: true)

"/socket.io/**": {
        proxy: {
          to: "http://backend:3001/**",
          headers: {
            "X-API-KEY": NUXT_API_SECRET,
          },
}

Thanks!