How can I setup proxy using Vercel

Question

My API it's running under another domain.. and I'm trying to configure proxy with Vercel ..

The app it's making requests to /api/test.json so I tried to... on vercel configuration

"redirects": [
        {
            "source": "/api/test.json",
            "destination": "https://myapi.com/test.json",
        }
    ],
    "rewrites": [
        {
            "source": "/(.*)",
            "destination": "/index.html"
        }
    ]

And I received 404 from /api/test.json

Answer 1

Use the wildcard path matching :path* syntax:

// in vercel.json:
// for example proxying /api/ → https://backend-endpoint/

{
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "https://backend-endpoint/:path*"
    },
    {
      "source": "/api/:path*/",
      "destination": "https://backend-endpoint/:path*/"
    }
  ]
}

---

NOTE: You need both very identical objects under rewrites array as above in order to make things work properly. The example in the documentation is only the one without the trailing slash and it won't convert (for example) /api/auth/login/ to https://backend-endpoint/auth/login/, that example can only convert /api/auth/login to https://backend-endpoint/auth/login (without trailing slash /)

(it took me a day to realize that trailing slash / is actually very important).

Answer 2

Simply use rewrites

"rewrites": [
    {
        "source": "/api/test.json",
        "destination": "https://myapi.com/test.json",
    }
]

Then in your application

httpAgent
  .get('/api/test.json)
  .then(res => { console.log(res) })