Impossible to allow mixed content on Android Emulator with Expo (React Native and Api Symfony)

Question

I have a trouble with Mixed Content and CORS with my app in React Native (front) and Symfony (API).

I use expo to run my front server and when I launch my server I can see "https" every time, even when I tried to modify that. I don't care about https because it's an app just for me.

I use Nelmio bundle to handle CORS on my backend :

nelmio_cors:
defaults:
    allow_credentials: true
    allow_origin: ['*']
    allow_headers: ['*']
    allow_methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS']

I try to add some config in my app.js especially "packagerOpts" and "usesCleartextTraffic" but as you can guess, it doesn't work :

{"expo": {
"name": "mobile",
"slug": "mobile",
"version": "1.0.0",
"orientation": "portrait",
"packagerOpts": {
  "https": true
},
"icon": "./assets/images/icon.png",
"scheme": "myapp",
"userInterfaceStyle": "automatic",
"newArchEnabled": true,
"ios": {
  "supportsTablet": true
},
"android": {
  "adaptiveIcon": {
    "foregroundImage": "./assets/images/adaptive-icon.png",
    "backgroundColor": "#ffffff"
  }
},
"web": {
  "bundler": "metro",
  "output": "static",
  "favicon": "./assets/images/favicon.png"
},
"plugins": [
  "expo-router",
  [
    "expo-splash-screen",
    {
      "image": "./assets/images/splash-icon.png",
      "imageWidth": 200,
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    }
  ],
  [
    "expo-build-properties",
    {
      "android": {
        "usesCleartextTraffic": true
      }
    }
  ]
],
"experiments": {
  "typedRoutes": true
}}}

I even tried to start backend with --allow-http and change http to https on my frontend urls but doesn't working.

Of course, when I just use expo on web and remove https for http, it working, but I don't know if it's possible with my Android Emulator...

Answer 1

After some reading I found a solution to my issue.

So, if anyone have this trouble :

1. Check if your firewall doesn't blocks ADB incoming connection
2. Call 10.0.2.2:(backend port) instead of localhost or 127.0.0.1 on your frontend. http://10.0.2.2:8000/api/register
3. Be sure to run expo with --tunnel npx expo start --tunnel because your machine and emulator need to be on the same network.

And now it's working.

Others Stackoverflow solutions (that doesn't work for me and multiple devs on the responses) advise to change emulator proxy with 10.0.2.2 or with the machine IP Address.