CORS Error When Accessing Swagger API Deployed on AWS EC2

[ashu1230]

Select Topic Area

Question

Body

I have deployed a NestJS backend on an AWS EC2 instance. The Swagger UI is accessible, but when I try to hit the API using Swagger, I receive the following error:

ISSUE: Failed to fetch. Possible Reasons:

1. CORS
2. Network Failure
3. URL Scheme must be "http" or "https" for CORS request.

Details:
The API works correctly when tested directly on the EC2 instance (e.g., using curl).
The Swagger UI is accessed via the public IP address of the EC2 instance.
The error occurs when trying to access the API endpoint through the Swagger UI.
My backend is running on http://localhost:3033, and the Swagger UI is being accessed via the public IP of the EC2 instance.

Troubleshooting Steps Taken:
Confirmed that the backend API is accessible directly from the EC2 instance.
Verified that the server is configured to handle CORS requests by setting the appropriate CORS headers in the NestJS application.
Checked the network configurations and security groups in AWS EC2 to ensure proper access.

Environment:
NestJS version: current
AWS EC2 Instance: Amazon linus(t2.micor).
Swagger version: 6.0.5
Browser: Chrome, Edge
Node.js version: Latest
CORE: 9.0.0

Request URL: http://localhost:3033/api/v1/auth/signin

Screenshot: -

Question:
How can I resolve this CORS issue, and what configurations are required to allow the Swagger UI to make successful API requests in this setup?

[windi917]

The error you're encountering (Failed to fetch) when trying to hit the API through Swagger UI is likely due to CORS (Cross-Origin Resource Sharing) issues. This is common when the API is hosted on one origin (localhost in your case) and the Swagger UI is accessed via a different origin (the public IP address of the EC2 instance). Let's go through the troubleshooting steps and potential solutions:

Troubleshooting Steps:
CORS Configuration in NestJS:

Ensure that your NestJS backend is properly configured to handle CORS requests. NestJS provides built-in support for CORS. You need to enable it with the correct settings. Update your main application file (usually main.ts) to allow requests from your Swagger UI origin:
typescript
Copy code
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
const app = await NestFactory.create(AppModule);

// Enable CORS for all origins or restrict it to specific origins
app.enableCors({
origin: '', // Replace '' with the specific origin of your Swagger UI for better security
methods: 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS',
credentials: true,
});

await app.listen(3033);
}
bootstrap();
Ensure that the origin parameter in enableCors allows the public IP address of the EC2 instance where your Swagger UI is running.
Accessing the API via the Correct URL:

Swagger UI is accessible via the public IP of the EC2 instance, but your backend is running on http://localhost:3033. The API endpoints should be configured to use the public IP address, not localhost.
Make sure the API URL in the Swagger UI points to http://<PUBLIC_IP>:3033 instead of http://localhost:3033.
Network and Security Group Configuration:

Confirm that the EC2 instance's security group allows inbound traffic on port 3033 (or any port your backend is running on). Ensure that both HTTP (port 80) and the port your API is listening on are open.
Using the Correct URL Scheme:

Ensure that both Swagger UI and the backend API are using the same URL scheme (http or https). A mismatch between http and https can cause CORS issues.
Check Swagger UI Configuration:

Make sure that the Swagger configuration is correctly set up to point to the API's public IP. If using NestJS with Swagger, you might have a Swagger setup like this:
typescript
Copy code
const options = new DocumentBuilder()
.setTitle('Your API Title')
.setDescription('Your API Description')
.setVersion('1.0')
.addBearerAuth()
.build();
const document = SwaggerModule.createDocument(app, options);
SwaggerModule.setup('api', app, document, {
swaggerOptions: {
url: 'http://<PUBLIC_IP>:3033/api-json', // Use the public IP address
},
});
Test API Endpoint via Public IP:

Test the API endpoints directly from your local machine using the public IP address (e.g., curl http://<PUBLIC_IP>:3033/api/v1/auth/signin). This will help verify if there are any network-related issues or misconfigurations.

[github-actions[bot]]

🕒 Discussion Activity Reminder 🕒

This Discussion has been labeled as dormant by an automated system for having no activity in the last 60 days. Please consider one the following actions:

1️⃣ Close as Out of Date: If the topic is no longer relevant, close the Discussion as out of date at the bottom of the page.

2️⃣ Provide More Information: Share additional details or context — or let the community know if you've found a solution on your own.

3️⃣ Mark a Reply as Answer: If your question has been answered by a reply, mark the most helpful reply as the solution.

Note: This dormant notification will only apply to Discussions with the Question label. To learn more, see our recent announcement.

Thank you for helping bring this Discussion to a resolution! 💬