Home > OS >  Apache httpd Reverse Proxy works in browser, but not in React Native
Apache httpd Reverse Proxy works in browser, but not in React Native

Time:11-17

I've setup Reverse Proxy on my EC2 instance's Apache httpd server. It appears to be working, according to the browser. My Express.js server is listening on port 5000, and if I enter url https://www.myapp.com in the browser, my Express server sends the correct response to the client.

However, the https url does not work on my React Native app. With my RN app on my local machine, API calls to my server using the url yields no response. I don't see any errors from either React Native or my server (pm2 logs gives me nothing).

Here are the important configs to my httpd.conf file:

//at the top of the file:

Listen 80

//at the bottom of the file:

ProxyPass / http://myapp.com:5000

ProxyPassReverse / http://myapp.com:5000

The only way my React Native app hits the API routes using the domain name is if I use this: http://www.myapp.com:5000 This works on the browser as well, but of course the connection is not secured.

This yields an error from React Native: https://www.myapp.com:5000. Notice the s in https

Undefined is not an object

Though this error is generally what you get when you give it a wrong url altogether.

This also gives me nothing: http://www.myapp.com, but on the browser it defaults to https and yields the correct response from Express.

I can't pinpoint where the issue is. I setup SSL/TLS for my domain name prior to setting up the reverse proxy, and it seems like this order is contrary to what online tutorials suggest. I honestly don't know if this matters though.

Any direction would be helpful. Thanks.

CodePudding user response:

As it turned out, the problem was with the config in my httpd.conf file. I needed to give the ProxyPass and ProxyPassReverse a path. A "/" alone wouldn't do.

ProxyPass /api http://myapp.com:5000

ProxyPassReverse /api http://myapp.com:5000

And then on my url path I needed /api at the end:

https://www.myapp.com/api

Now everything works.

  • Related