CORS Error When Accessing Swagger API Deployed on AWS EC2

[ashu1230]

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:
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?

[pransh15]

Hi @ashu1230 👋

Thanks for starting this discussion, I'm happy to share a CORS resource. The issue might be related to how your server is handling CORS preflight requests. Specifically, if your API endpoints are not correctly configured to respond to OPTIONS requests (which are sent by browsers as a preflight check before the actual request), this can cause the "Failed to fetch" error in Swagger UI. If these headers are not present, the browser will block the request resulting in the error.

You can also refer to various errors in CORS: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors#cors_error_messages

For any NestJS and Swagger UI questions, I believe StackOverflow would be a better resource since we don't maintain any updated resources on them.

[ashu1230]

Thanks for the reply, solved!

another problem