I'm building a React Native frontend with Expo (managed workflow) and an Express backend running locally. My app works fine on the web version (using expo start --web
), but when I test on the Android emulator, the frontend can't connect to the backend. I’ve tried several things, but nothing seems to work.
What I’ve Tried
Changed the API URL in
.env.development
:API_URL=http://10.0.2.2:3000
(for Android emulator)API_URL=http://192.xxx.x.x:3000
(my local IP address)API_URL=http://localhost:3000
Updated
app.json
to allow cleartext traffic:"expo": {"android": {"usesCleartextTraffic": true }}
Confirmed backend is running:
- Accessing http://localhost:3000 in my browser works fine.Disabled firewall/antivirus to ensure they aren't blocking requests.
Tested API URL in Postman using my local IP, and it works.
Relevant code for reference:
.env.development:
#API_URL for web#API_URL=http://localhost:3000#API_URL for androidAPI_URL=http://10.0.2.2:3000
Example frontend api call:
auth.ts:
export const login = async (email: string, password: string) => { console.log("API_URL", API_URL); const response = await fetch(`${API_URL}/auth/login`, { method: 'POST', headers: {'Content-Type': 'application/json', }, body: JSON.stringify({ email, password }), }); const data = await response.json(); if (!response.ok) { throw new Error(data.error); } return data;};
I have a basic cors policy that should not effect this I do not think:
// CORS configuration to allow requests from the frontendconst corsOptions = { origin: true, credentials: true, // Allow credentials (cookies, headers)};app.use(cors(corsOptions));// Handle preflight requests for all routesapp.options('*', cors(corsOptions));
Please let me know if other information is needed.