connecting to local backend from android app

Question

I have my Laravel backend that I am trying to connect to from android app. my hosts file has

   127.0.0.1    my.backend.test

the httpd conf file in my backend is

<VirtualHost *:80>
ServerName      my.backend.test
DocumentRoot    /var/www/mybackend.co.uk/code/public/
DirectoryIndex  index.php
RewriteEngine   On
ErrorLog        /var/www/mybackend.co.uk/code/storage/logs/apache_error.txt

Header set Access-Control-Allow-Origin "http://localhost:4200"

<Directory /var/www/mybackend.co.uk/code/public/>
    AllowOverride All
</Directory>

I can access http://my.backend.test/api/some-route fine from google ARC but not from my phone. I seem to have to use my local ip address but I dont understand how to set that up.

I tried adding

<VirtualHost 192.168.my.ip:8080>
ServerName      my.mobilebackend.test
DocumentRoot    /var/www/mybackend.co.uk/code/public/
DirectoryIndex  index.php
RewriteEngine   On
ErrorLog        
/var/www/mybackend.co.uk/code/storage/logs/apache_error.txt

<Directory /var/www/mybackend.co.uk/code/public/>
     AllowOverride All
</Directory>

to httpd conf and

192.168.my.ip my.mobilebackend.test

to hosts

Answer 1

Try this method

ip:port

Example

10.0.2.2:80

Note: Firewalls may cause problems with this. Windows has Microsoft Windows Firewall enabled by default. You may have to disable it

IP address

If you are using an emulator:

10.0.2.2

If you are using a real device:

1. Connect them into the same network. Either using a WiFi connection or using USB tethering option in your phone.
2. Find the IP address of your computer by typing ipconfig in cmd (if you are using Windows)

Port

Default port is 80. If you have changed it, use the new one.

Answer 2

If I understand correctly : you can access your server from a different machine on the same network (so this is not a firewall problem) but only if you use the name (added in client's hosts file) and not the IP address.

Is your configuration the first virtualhost ? apache search for a ServerName matching the name provided in the query (e.g. the URL), then falls back to the first one, in your case the ubuntu home page.

As a test, what happens if you use

ServerName      192.168.0.1 (i.e. the IP used in the URL)

I think it will work if you access the server by IP address, but not anymore by name

Answer 3

OK, Let's first clarify the problem that you are encountering so that my solution will be clearer.

Your problem is that you are hosting a backend locally on your computer and although you are able to access it without a problem on your computer itself, when you try to connect to it from a different device you are unable to access it.

This problem comes from the fact that your website is hosted locally on your computer and is not accessible to the outside world, Therefore your phone which is presumebly on a mobile network, cannot access your backend since your backend is on your own private network and your phone cannot access this private network from its own network, This is due to the fact that generally your router/isp block incoming requests to port 80, so even if you would know your computers public ip address you still would be blocked.

Now that we discussed the problem, lets go through what a solution would entail. A solution would entail that either both your phone and your computer are on the same network, or you expose your computer to the public internet.

Lets go through some ways to acheive this.

1. The first and arguably the simplest way to acheive this would be to put your computer and your phone on the same network. This can be acheived by connecting your phone to the same router that provides your computer with internet access. Once you are connected to the same network, all you have to do is instead of using this url http://my.backend.test/api/some-route, replace my.backend.test with the local ip address of your computer so if your computers local ip is 192.168.0.2 then it becomes this http://192.168.0.1/api/some-route and now you will be able to access your backend from your phone.

Note: You may be wondering how do I figure out my computers local ip address? On windows it can be found by going into network settings > right click on your network connection > click properties from the context menu and then look for the field that says ipv4 address, that is your local ip. On mac you can find it by going to System Preferences > Network > clicking on the connection that has a green dot next to it > Then underneath the status label you will see the current local ip address that you are connected to.

Solution #1 is great if you don't mind going through the hassle of connecting your phone to the same network as your computer, but lets say its a pain, or impracticle for various reasons like lack of wifi etc or its just that you want your phone to be able to access the computer from Anywhere and no matter what network it is on If this is the case, solution 2 is for you.

2. We will enable access to your computers localhost to the entire internet by using reverse tunneling software, in our case one of the most popular choices is Ngrok, available here. What Ngrok does is it creates a tunnel to your local host and assigns it a publicly accessible domain such as yourapp.ngrok.io which you can use in place of my.backend.test to access your application from anywhere. So once you enable Ngrok you just replace http://my.backend.test/api/some-route with http://yourNgrokAppDomainName.ngrok.io/api/some-route and you will then be able to access your backend from your phone from anywhere no matter which network you are on.

In summary these are two ways for you to access your backend that is on your computer from a phone. Hope it helps.