The BEST way to proxy your API in Nuxt
HTML-код
- Опубликовано: 25 июл 2024
- ➡️ Proxying routes to your back-end or third party APIs is a common practice! Over the last two years, various strategies came up in Nuxt. But not all of them work equally will. To figure out which two strategies are the recommended ones, we have a look at the four most common strategies, their shortcomings and which ones I would recommend to use!
Key points:
✅ How a successful proxy strategy looks like
🔢 All common strategies - From Vite's proxy to a Nitro proxy endpoint
‼️ Which strategies to use and how to implement them
Links:
📺 Nuxt vs. Nitro: • Nuxt vs. Nitro - What ...
🔗 GH discussion around proxying: github.com/nuxt/nuxt/discussi...
📺 Common runtimeConfig mistakes: • Nuxt's runtimeConfig -...
🔗 H3 JSDoc: www.jsdocs.io/package/h3
🔗 Code: github.com/manniL/alexander-l...
Don't forget to hit that "Subscribe" button, ring the notification bell and give a thumbs up!
🌐 Connect further:
Website: www.lichter.io
Twitter/X: / thealexlichter
Twitch: / thealexlichter
Chapters:
00:00 Intro
00:54 Discussion around proxying
01:30 Setup & demo app
02:57 Goals for our proxy solution
04:14 Strategy 1 - Vite's proxy
07:30 Strategy 2 - Nitro's devProxy
10:16 Strategy 3 - Proxy routeRule
13:30 Strategy 4 - Nitro proxy API endpoint
19:28 Summary and what to use 
Наука
Which strategy did you use so far? Any plans to switch now? 🙊
Hey Alex, great work on your videos! Like your explanations so much
But I guess there is another way to do this from Nuxt modules, right? Access `useRuntimeConfig()` from there and tweak routeRules.
Hey Mostafa! Thanks 🙏🏻
Interesting idea. I think it might but haven’t tried it yet. Will report back when I did! 👌🏻
funny, no strategy works on my project :|
any chance of reaching out to you? google meet call?
I wish i was taught everything by you it would have saved me a lot of time. Great video!
Thank you 🙏🏻
No worries, more content is in the making 😊
Is there anything specific that you want to learn about?
This is very important and a pretty good idea ;-). Looking forward to implement!
I needed this video a month ago, but nice to see that it is finely here . ^_^
That’s unfortunate 🙈
Anything you are stumped about right now though?
Thank you for helping us understand why the other options didn't work, and how / why nitro work. I must admit I forgot to include the `server: true` prop in the $fetch options, and when testing the production version, the proxy wasn't working. Thankfully I realised my mistake and now everything is working smoothly finally!
You are very welcome! Yeah, I only mentioned the "server: true" part (it is the default though) for useFetch, so that's a tiny bit on me. Glad it worked though 🙏
Another good video. Thanks Alex.
My pleasure! 🙏🏻
Thanks for the solution! You helped me a lot
Glad to hear that! You are welcome ☺️🙌🏻
Perfect solution! Thanks
You are very welcome 🙏🏻
Please create a video to protect the server API endpoint from direct calls from other websites. Eg - Allow access to certain domains, and cors, add authentication and more security feature
Noted 👍🏻
Thank you for your content Alex, it is most helpful with my Bachelor thesis.💪
Glad to help! What are you writing about (also just finished my "master-equivalent" thesis)?
@@TheAlexLichter I am rewriting a section in one of the systems we use at school. It serves as a portal for submitting team projects that are divided into iterations. We are currently migrating from Django to .NET Core backend and Nuxt on frontend.
I have to say that comming from Next.js, the DX of Nuxt combined with Nuxt UI is something else. It is amazing and I am very glad we chose this tech stack. It has an amazing community.
What was your thesis about?
Thank you very much, this helps me a lot. Still, I need to know how to proxy websockets.
oh, wow. This is really helpful.
Happy to hear that 🙌🏻
Nice work, thanks.
So far I call external api directly. But with your proxy approach now, how to deal with the authorisation, to serve the api token as the same time securing routers with middleware ? Do I use both server and application middlewares, bearer token saved in pinia’s store.
Thanks 🙏🏻
Yes, you'd call e.g. a `/api/XYZ` endpoint which is the shown Nitro proxy endpoint and ensure that the headers (e.g. for auth) are present in that call. `proxyRequest` will forward all headers automatically (except some ignored ones. - github.com/unjs/h3/blob/53703dc860f1ff6fe7ce71d543deff1cfa810b11/src/utils/proxy.ts#L24-L31)!
Great video. could i also do this to proxy websocket endpoint ?
Hey Alex, thanks for the really informative and well explained video. I have one more question though, how would you handle the case where I only want to have this proxy during development. So I only use it to handle cors and cookie issues, but I don't need/want to have this proxy in production stage because that would mean an additional, unnecessary load on the server.
Use the env aware config - ruclips.net/video/DFZI2iVCrNc/видео.html
what i can do if i have custom $fetch plugin, with base api url, JWT tokens, but i want to proxy it through nitro for some security reasons and send user-agent and ip to api?
Another great video Alex, just a question, if I'm proxying my request to an external backend endpoint and I'm required to pass a Authorization Header. How should I go about implementing this? , will proxyRequest forwards the headers as well?
Yes, it will! Compared to another helper called `sendProxy`, `proxyRequest` will merge the request headers for us. This happens here in the code: github.com/unjs/h3/blob/53703dc860f1ff6fe7ce71d543deff1cfa810b11/src/utils/proxy.ts#L54-L70
@@TheAlexLichter Nice! another question, how would i set the Authorization Bearer Header?
I tried using the setHeader helper but it didn't work.
setHeader(event, 'Authorization', 'Bearer )
I think you can set it through the 3rd parameter of proxyRequest via { headers: { Authorization: ‘token here' } }
Great clip
Thank you 🙌🏻
Dont know why its not working in my case, I am using server/routes/[...].ts as my apis doesnt begin with api. It will also work in the same way right?
Thanks Alex. I used the routeRules proxy on my project couple month ago. I have a env variable on Vercel which is set to different URL for prod and preview, and routeRule proxy uses that. Do you suggest using runtimeConfig method for that?
Yes, absolutely! RuntimeConfig is the best option here 👌🏻
Nice! Thx :)
Offtipc; What I still hate about routerules is that headers are set only for response headers.
You are welcome!
I think that is a good candidate for a feature request issue 😁
@@TheAlexLichter
Again? I see a pattern lol 😅
Will do, NP. Tomorrow 🎉
@Tarabass good ideas = good issues I’d say 😁
@@TheAlexLichter Issue #24971 opened
Great video! i just have one question, what would be the advantages of proxying our requests vs calling the api directly?
Avoid CORS and „hide“ the backend urls.
Also load balancing and co if you have multiple URLs
I've also added some more use cases in my comment if you want to check it out. :)
Hi, does the work in production mode? I tried the vite server approach last week but it didn't work in production. I proxied the API was due to an SSL certificate validation error.
Yes, the two shown techniques at the end work in prod :)
Thank you for the great videos. Can you make a video on how to handle the auth with a proxy...
I’ll add it to the list! Anything to cover specifically with regards to proxy and auth?
@@TheAlexLichter maybe you have an idea how proxy handle token to passing every request.so on the frontend useFetch and $fetch will be clean. I'm using Laravel as an API. So far i end up using composable to manually handle authentication in every request like redirect ..get the token from cookies..and i think this is verbose . It will help if you have an idea for this
Please can you explain what island components are, why and if we should use them?
Is on the list for next year 🙌🏻
Hey Alex! Great stuff as usual! Let me know if I am overthinking, but after reading all comments I didn’t see any mentions on performance. Let’s suppose I have a backend API on another server / port written on another language / framework than ts & nuxt … if I understood your approach correctly after implementing it on my app you just added a simple proxy that forwards the request to “maybe” another proxy or whatsoever … wouldn’t be faster / easier to just create a custom fetch wrapper that uses nuxt config to point to the “right” proxy? For me the proposed approach seems to be another layer / bottleneck that can potentially generate errors or who knows what in a scenario of high volume of transactions… am I missing something here?
Hey Luis! Thanks for the comment.
Perf-wise, the overhead should be rather small + you *can* also apply route rules or custom caching to it to even improve performance! A good example @ x.com/Atinux/status/1798294901559546038
But if you don't need the proxy (no caching wanted, no CORS issues etc. etc.) you are free to not proxy at all 👌
@@TheAlexLichter thank you for your prompt response … when you say
“You are free to not proxy at all”
This means that having a useCustomFetch with baseapi + headers rewrite seems to be a good option?
Sure, you can hit the API directly + set the headers you need, absolutely
What approach would you recommend for transforming the data received from the proxy. I tried saving the result of proxyRequest to a local variable, and returning something else but the data I get from the API route is always the data from proxyRequest.
In this case you might consider using $fetch explicitly and transform the data afterwards 😊
Thank you for this great content.
Please I remark that proxyRequest doesn't handle well the 422 errors from an external api. It returns 200 status code. Is there a way to handle that ?
That sounds like a bug! Can you reproduce that and raise an issue in the h3 repo?
Will these techniques pass along any cookies that exist for the /api url ? If you have /api/login proxied to another api that actually handle the login. How will cookies be ahndled ? Cookies are super important but nobody seem to explain how to handle them !
@TheAlexLichter
What about putting the endpoint not in the `api` folder but instead put it in the `routes` folder? In that way there's no need for replacing 'api'.
For me it's very unclear what the routes folder is all about. In some video's it's used to return html, strings and stuff.
Would also work! I’ll make a video about that 🙊
@@TheAlexLichter you're the best!
What are the performance implications of using nuxt proxying, as opposed to calling the external backend endpoints directly?
Should be a rather small overhead, especially because you commonly have to deal with CORS otherwise 👌🏻
@@TheAlexLichter What if someone our proxied URL from different domain?
You mean what if someone accesses that URL from another project?
Well, then you could eg blacklist the IP (or domain)
@@TheAlexLichter Instead of blacklisting how to allow access to certain domains or IP
thank you for the explanation.. but how if we have more than one proxy base url? thank you
No problem! Then add them both via runtimeConfig and choose the "correct one" based on your criteria, e.g. the URL path
very nice!!
Thank you! Cheers! 🙌🏻
in a deployment platform like Railway, where cpu and egress is billed, wouldnt this result in unnecessary cost?
It’d be count into bandwidth, yes. CPU minimally, that should be negligible.
right on ❤🔥
Thanks 🙏
Alexander, will there be a video about caching nitro?
Yes Mikhail, that's still on my list 😋
Great video... thanks! I am wondering if it is possible to implement it with Apollo graphql.
Yes, absolutely. I wouldn't see why not 😊
@@TheAlexLichter I am using Apollo inside the Pinia store. Am I supposed to run it on the proxied server?
@sania3631 not sure I understand. When you use Apollo, do you need a store then?
Probably Nuxt GQL client would be a bit more lightweight. Then, use the path you wanna proxy as endpoint
If you want to proxy requests to a GraphQL backend, that definitely works. You basically create the proxy and tell your Apollo client that the httpEndpoint is your proxy (instead of the URL to the actual GraphQL backend). I did that in a project and that works just fine.
Thanks a lot for your video, helped me a lot but I have an issue for the past days: data are now received in binary instead of plain JSON text. Specifying the encoding helped me but I don't think this is the correct approach, any ideas ?
Does the API set the correct „content-type“ header?
@@TheAlexLichter thanks for your answer, it is a 3rd-party api: content-type is set to application/json
thanks
And does the fetch call sets a different `Accept` by any chance? Worst case, you can use $fetch to ensure the responseType will be json ☺️
@@TheAlexLichter I will check it out, thanks a lot pal
Hi Alex! Thank you for the video. I have a question. When I built a Nuxt 3 app, your strategy 4 did not work with $fetch. It did not replace the API URL. Do you have any suggestions on how to resolve this?
How do you mean "it did not replace the API URL"? 🤔
"When I make a request, it doesn't replace myProxyUrl with 'xx.xx.xx.xx' in nuxt.config.ts."
@@TheAlexLichter "When I make a request, it doesn't replace myProxyUrl with in nuxt.config.ts."
When I make a request, it doesn't replace myProxyUrl with in nuxt.config
Do you have any special recomendations if we're trying to proxy images and need to pass on auth headers? had this working on a nuxt 2 project but struggling to figure out how to get it going in nuxt 3
Should work the same way (with a nitro endpoint serving them). If not, hit me up with a "broken" example reproduction :)
@@TheAlexLichter Thanks! Managed to get it working, but had to do it differently - added a file to the /server/middleware/ folder, and here it worked (my endpoint isn't called api, so caused some issues figuring why it didn't work). Might be worth noting in case others struggle with the same case :)
can you talk about swr in nuxt thank you great video!
Sure thing! On my list 😊
Can we use Nginx to proxy? Is it better? what are the pros and cons
Sure, you can use NGINX for proxying! "Better" depends on your need. A simple API proxy should not make a big difference perf-wise but lots of rules could make a difference. Be aware that you still need to set up your dev proxy differently then (e.g. via Nuxt) ☺️
Could you have used $fetch instead of proxyRequest ?
Yes, just add the target as the path, proxyRequest is just help function provided by h3
Would work (as commented before)! But proxyRequest passes all the headers and body of the incoming request, which is often desired
with $fetch it is more like a BFF pattern (fetch + maybe transform the data)
it's good for GET request, how about other methods like POST, PUT, DELETE? I've tried, but it's responsed with status 405 METHOD NOT ALLOWED :(
Should also work when not using .get.ts as suffix ☺️
@@TheAlexLichter I'm not using .get.ts, just [...] .ts like your video :(
@@TheAlexLichter oh, my bad, that error is because of my BE response, not because of the proxy, thanks :D
thanks man
You are welcome!
Somehow the [...].ts doesnt work on production build. only works on development mode
How and where do you deploy? 🤔
@@TheAlexLichter trying on local using pnpm build and then run `node .output/server/index.mjs`
@@TheAlexLichter ill try to create minimal reprod latter and submit to nuxt issues i think
Nevermind, while creating reproduction. it work as expected, let me check my code 🤧
That's the best part of reproductions IMO! Happens to me so often 😋
Thanks for the video, getting this 502 error
at createError (./node_modules/h3/dist/index.mjs:78:15)at sendProxy (./node_modules/h3/dist/index.mjs:1168:11)at process.processTicksAndRejections (node:internal/process/task_queues:95:5)at async ./node_modules/h3/dist/index.mjs:1975:19at async Object.callAsync (./node_modules/unctx/dist/index.mjs:72:16)at async Server.toNodeHandle (./node_modules/h3/dist/index.mjs:2266:7)
Are you sure that the API to proxy to is available?