I am developing a NestJS backend and testing it on a real Android device.
The Setup:
Backend IP:
192.168.1.5:3000(MacBook)Device: Real Android phone connected to the same Wi-Fi.
Observation: I can successfully open the Swagger documentation in the phone's browser at
http://192.168.1.5:3000/api/docs.
The Problem: When I click "Try it out" for any endpoint (e.g., /auth/login) inside the Swagger UI on the phone, the request fails with the following message:
TypeError: Failed to fetchPossible reasons: CORS, Network failure, or URL scheme must be http or https
It works perfectly on the Android Emulator using http://10.0.2.2:3000.
Current main.ts CORS config:
app.enableCors({
origin: ['http://localhost:5175'], // My Vite frontend
methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS', 'PATCH'],
allowedHeaders: ['Content-Type', 'Authorization'],
credentials: true,
});
await app.listen(3000, '0.0.0.0');
2. Returning Subclasses
A factory constructor can decide which specific implementation to return based on the arguments provided. This is often used in the Factory Pattern.
app.enableCors({
origin: ['http://localhost:5175'], // My Vite frontend
methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS', 'PATCH'],
allowedHeaders: ['Content-Type', 'Authorization'],
credentials: true,
});
await app.listen(3000, '0.0.0.0');
Current Swagger Config:
const swaggerConfig = new DocumentBuilder()
.setTitle('Liaison360 API')
.addServer('http://localhost:3000', 'Local Development')
.addServer('http://192.168.1.5:3000', 'Local Network')
.build();
What I've tried:
Verified the phone and laptop are on the same network.
Verified the backend is listening on
0.0.0.0.Since the Swagger HTML page loads, I know the port is not blocked by a firewall.
Why does the browser allow loading the Swagger page but block the actual API fetch requests, and how should I configure CORS in NestJS to allow this testing?