Ionic + Laravel how connect emulator to database

Hello everybody,

i am developing an application using ionic for the front end and laraval for the backend, for the connection i use xampp.

When I connect from broswer if I use the addresses:
http://localhost:8000
http://127.0.0.1:8000
it works.

but when i go to launch the emulator using the command “ionic cap build android”, on android studio i can’t get the data from the server …

i tried to use:
10.0.2.2;
i tried with the ip address of my pc.
the ip address that comes out to me under “external” when I start the command “ionic cap run android -l --external”.
i tried with the ip address of my pc

but nothing.

in the latter case if I start from broswer in console the error appears:
Access to XMLHttpRequest at ‘http://192.168.1.14/api/apartaments’ from origin ‘http: // localhost: 8100’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

laravel connects to the address 127.0.0.1:8000.

Are there any solutions that do not require numerous operations? otherwise we might as well take a host and try it out directly.

Thanks.

p.s. I would also like it if there was a way to connect by installing the apk on my device.

Great to see another Laravel developer here :slight_smile: I also have a Laravel backend. Since I run Laravel on my dev machine with Homestead, I have to run my Ionic app on a physical Android device due to CPU architecture limitations (can’t run two different emulator/VM stacks at the same time, VirtualBox and Android emulator).

To run on a physical Android device via USB, I run this command:

ionic cap run android -l --external

I choose my physical device from the list. Sometimes it takes some work to get it to show up. If you need help let me know.

The IP I choose is the IP of my laptop on my local network (e.g. 192.168.1.10). My Ionic app calls my Laravel app with that same IP. An example base URL being http://192.168.1.10:8000/api/v1/mobile/.

In order for the API calls and live reload to work on my Android device, I had to open up port 8000 and 8100 on my laptop’s firewall. I restrict it to my Android device’s IP address to be a little more secure.

For you to connect to your Laravel app on XAMPP from the emulator, it would probably be you computer’s IP and port 8000.

You also need to make sure you have the proper allowed_origins in your cors.php file. I have the following:

'allowed_origins' => [
    'http://192.168.1.10:8100',     // Local development
    'http://localhost:8100',        // Local development
    'capacitor://localhost',        // iOS
    'http://localhost',             // Android
],

Hopefully this helps and let me know if you have any questions!

1 Like

Yes!! I entered the world of programming a year ago with a free basic course where they taught me how to develop websites … then on my own I tried to learn how to develop applications, and thank god I discovered ionic and laravel which in combos are very comfortable and super … Anyway thanks a lot for the answer!!

  • I enabled my phone for USB debugging so as to find it with capacitor
  • I fixed the ip on both ionic and started laravel always on the same ip.

NOW WORKS!! so I can test directly on smartphone without having to buy host spaces etc …

A thousand thanks!!

p.s. amazing how on this forum there is always someone to give you a hand, congratulations!

1 Like