I have a nginx server running at www.example.com.
Within it, I have set up a reverse proxy to a static website of mine hosted with Zeit now.
location /apps/app1/ {
proxy_pass https://app1.username.now.sh;
}
However, when I visit www.example.com/apps/app1, I get the correct browser tab name ('React App' in my case as my static website is made with React and the default name is 'React App').
In the browser console, I see the following errors:
GET https://www.example.com/static/css/1.621e483e.chunk.css net::ERR_ABORTED 404 (Not Found)
GET https://www.example.com/manifest.json 404 (Not Found)
Manifest: Line: 1, column: 1, Unexpected token.
I had a similar issue when my static website was hosted at Netlify. The Netlify customer service told me that they don't support reverse proxying, but that I could use their own redirects.
Why am I not able to reverse proxy to a static website at an external URL? Is there a way to fix this?
Update 1: I'm currently trying to reverse proxy bluprince13.com/apps/renting-vs-buying/ to renting-vs-buying.bluprince13.now.sh
Here's what worked for me, but I only figured it out with the help of the other guys who answered below. In hindsight, it seems so simple and I feel silly for having not figured it out myself!
The response's HTML contains absolute URLs for CSS and JS files. The browser initially loads the HTML page from the /apps/app1 prefix, but then it tries to load assets from /static, /favicon, /css etc. But, there's nothing there!
The problem is that the app uses absolute referencing. All I needed to do was change my app to use relative referencing instead. With React, you can do this easily by putting this in your package.json (see docs here):
"homepage": ".",
Now, the browser will correctly load assets from /apps/app1/static, /apps/app1/favicon, /apps/app1/css etc.