Amazon Web Services Question posted in
The official Amazon Web Services documentation can be found here.

Amazon web services – CORS Error When Accessing Swagger API Deployed on AWS EC2

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:

  1. The API works correctly when tested directly on the EC2 instance (e.g., using curl).
  2. The Swagger UI is accessed via the public IP address of the EC2 instance.
  3. The error occurs when trying to access the API endpoint through the Swagger UI.
  4. 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:

  1. Confirmed that the backend API is accessible directly from the EC2 instance.
  2. Verified that the server is configured to handle CORS requests by setting the appropriate CORS headers in the NestJS application.
  3. 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
Error Image Please check

Tags:

2

Answers


  1. 0

    have you allowed this in your cors settings of your nestjs BE

      app.enableCors({
    origin: ['http://your-ec2-public-ip', 'http://localhost:3033'], // replace with your EC2 public IP or domain
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
    credentials: true,
  });
    Login or Signup to reply.
  2. 0

    I have never experienced the issue you mentioned, as the EC2 instances I purchased all come with technical support. Don’t yours have this? Additionally, I received a 10-30% discount and didn’t need to register. I purchased them through TG：@TC624. I would also be happy to provide you with a solution:

    It looks like you’re facing a common issue with CORS (Cross-Origin Resource Sharing) when accessing your Swagger UI that is hosted on an AWS EC2 instance. Given the details you provided, here are a few steps to help you troubleshoot and resolve the issue:

    Understanding the Issue
    The primary issue seems to be that your Swagger UI is trying to make API requests to http://localhost:3033, but it should be using the public IP address of your EC2 instance instead. This mismatch is causing CORS issues.

    Troubleshooting Steps
    Update Swagger Configuration: Ensure that your Swagger UI is configured to point to the correct API endpoint. Instead of http://localhost:3033, it should be set to the public IP address or DNS of your EC2 instance.

    Example: If your public IP is 54.123.45.67, update your Swagger configuration to use:

    "servers": [
  {
    "url": "http://54.123.45.67:3033"
  }
]

    Update the Swagger configuration in your NestJS application where you define Swagger settings.

    Configure CORS in NestJS: Ensure CORS is properly configured in your NestJS application to allow requests from the Swagger UI’s origin. You can configure CORS in your main.ts file like this:

    import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

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

  app.enableCors({
    origin: 'http://your-public-ip:your-swagger-port', // Replace with the actual IP/port where Swagger UI is being served
    methods: 'GET,POST,PUT,DELETE',
    allowedHeaders: 'Content-Type,Authorization',
  });

  await app.listen(3033);
}
bootstrap();

    If Swagger UI is served from the same EC2 instance but on a different port, you can use:

    app.enableCors({
  origin: 'http://localhost:your-swagger-ui-port',
});

    Update Security Group and Network ACLs: Ensure that the security group attached to your EC2 instance allows inbound traffic on the port your API and Swagger UI are using (e.g., port 3033). Also, ensure that Network ACLs and any firewalls are configured correctly.

    Check Swagger UI URL: Make sure the URL specified in Swagger UI’s configuration is correct. If Swagger UI is running on a different port, you must specify this correctly in your Swagger settings. For example:

    const options = {
  swaggerOptions: {
    url: 'http://54.123.45.67:3033/api-docs', // Update with correct URL
  },
};

    Verify Network Access: Confirm that there are no network issues preventing access from the public internet to your EC2 instance. Use tools like curl or Postman from outside your AWS environment to test accessibility.

    Debugging:

    Open Developer Tools in your browser (F12 or right-click -> Inspect) and check the Console and Network tabs for specific error messages.
    Use the Network tab to see the exact request and response headers and verify if CORS headers are present and correct.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search