How to Set Up API Proxy to Other Services in Nuxt3
2022-11-20 12:29 (2 years ago)
ytyng
Nuxt3 makes it easy to create server-side APIs by simply creating a file like server/api/xxx.ts. However, this document is for those who use other web frameworks for server-side APIs and want to set up their development environment easily.
In Nuxt3 versions prior to 3.0.0-rc.11, you could set up vite.server.proxy in nuxt.config.ts. However, this setting is no longer available in Nuxt3 versions 3.0.0-rc.12 and later.
From rc.12 onwards and in the official release, you can achieve the same functionality by setting devProxy in nitro.config.ts.
Background
While developing a Nuxt application, I was proxying all requests to paths under /api/ to another server (Django) on the Dev server. In the production environment, the routing is managed by Kubernetes Ingress, so this proxy was only used in the development environment.
This was achievable with the following configuration in nuxt.config.ts:
export default defineNuxtConfig({
vite: {
server: {
proxy: {
'/api/': {
target: 'https://example.com/',
....
},This setup worked fine in Nuxt3 rc.11, but after upgrading to rc.12 or the official 3.0.0 release, it no longer functions.
History
This issue has been discussed on Github:
https://github.com/nuxt/framework/discussions/1223
https://github.com/nuxt/framework/discussions/1223#discussioncomment-2784724
As announced in this comment, for development environment purposes, you should use the proxy settings in Nitro.
Adding one more configuration file is all that is needed; no additional packages are required.
Configuration Method
Create nitro.config.ts alongside nuxt.config.ts in the project root.
nitro.config.ts
import { defineNitroConfig } from 'nitropack';
// https://nitro.unjs.io/config#devproxy
// https://github.com/http-party/node-http-proxy#options
export default defineNitroConfig({
devProxy: {
'/api/': {
target: 'https://api.example.com/api/',
changeOrigin: true,
hostRewrite: true,
cookieDomainRewrite: true,
headers: {
'X-Forwarded-Host': 'localhost:3000',
'X-Forwarded-Proto': 'http'
},
}
}
});Then, restart the development server. This will enable the development proxy.
Verification Method
To quickly verify how each option works, you can start a server on your development machine using nc.
nc -l 8000Then in nitro.config.ts:
export default defineNitroConfig({
devProxy: {
'/api/': {
target: 'http://127.0.0.1:8000',
...Set it up like this to confirm the operation.
Although it can only respond to one request at a time, this is sufficient for testing purposes.
References
Nitro documentation:
- https://nitro.unjs.io/config#devproxy
- https://github.com/http-party/node-http-proxy#options
Comments