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

How did you solve your problem mate @ridermansb? – Loi Nguyen Huynh Jul 02 '21 at 22:09 — Loi Nguyen Huynh, Jul 02 '21 at 22:09

score 4 · Answer 1 · answered Jan 27 '21 at 14:40

4

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) })

answered Jan 27 '21 at 14:40

Bergur

3,962
12
20

Loi Nguyen Huynh · Answer 2 · 2021-07-04T06:00:54.370

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).

How can I setup proxy using Vercel

2 Answers2