Unable to resolve CORS error on API deployed on Elastic Beanstalk

Question

I am working on a Node.js app deployment on Elastic beanstalk. Deployment goes well. EB Health is on OK status. Logs show server runs successfully. But when I run my frontend application deployed on S3, I get CORS error. I have set CORS on S3 as follows

[
  {
    "AllowedHeaders": [
        "*"
    ],
    "AllowedMethods": [
        "GET",
        "PUT",
        "POST",
        "DELETE"
    ],
    "AllowedOrigins": [
        "http://udagram-tauseef.s3-website-us-east-1.amazonaws.com"
    ],
    "ExposeHeaders": [
        "x-amz-server-side-encryption",
        "x-amz-request-id",
        "x-amz-id-2"
    ],
    "MaxAgeSeconds": 3000
  }
]

And here's code for CORS in backend application.

 const corsOptions = {
    origin: '*',
    optionsSuccessStatus: 200,
  }
  
  app.use(cors(corsOptions))

Bucket Policy that I'm using

{
"Version": "2012-10-17",
"Id": "BucketPolicy",
"Statement": [
    {
        "Sid": "AllAccess",
        "Effect": "Allow",
        "Principal": "*",
        "Action": "s3:*",
        "Resource": [
            "arn:aws:s3:::mydemos3bucket",
            "arn:aws:s3:::mydemos3bucket/*"
        ]
    },
    {
        "Sid": "eb-ad78f54a-f239-4c90-adda-49e5f56cb51e",
        "Effect": "Allow",
        "Principal": {
            "AWS": "arn:aws:iam::000246328708:role/aws-elasticbeanstalk-ec2-role"
        },
        "Action": "s3:PutObject",
        "Resource": "arn:aws:s3:::mydemos3bucket/resources/environments/logs/*"
    },
    {
        "Sid": "eb-af163bf3-d27b-4712-b795-d1e33e331ca4",
        "Effect": "Allow",
        "Principal": {
            "AWS": "arn:aws:iam::000246328708:role/aws-elasticbeanstalk-ec2-role"
        },
        "Action": [
            "s3:ListBucket",
            "s3:ListBucketVersions",
            "s3:GetObject",
            "s3:GetObjectVersion"
        ],
        "Resource": [
            "arn:aws:s3:::mydemos3bucket",
            "arn:aws:s3:::mydemos3bucket/resources/environments/*"
        ]
    },
    {
        "Sid": "eb-58950a8c-feb6-11e2-89e0-0800277d041b",
        "Effect": "Deny",
        "Principal": {
            "AWS": "*"
        },
        "Action": "s3:DeleteBucket",
        "Resource": "arn:aws:s3:::mydemos3bucket"
    }
  ]
}

Also tried app.use(cors()) Here is the link to last EB Log file. But still I am unable to get it resolved. Here's an ss of error.

I have configured everything following documentation. But I'm stuck on this issue. Do I have to do something on EB? Or should I update CORS policy on S3 Bucket? Please let me know if I need to add more details to the question.

EDIT:

Here are network response headers on the API.

And here too, if you wanna see the OPTIONS header.

Your log mentions an issue with the "Preflight" request. That is usually a request using the "OPTIONS" method. Can you check your network tab for that request, and add the details of the response to that request in the question? — Renato, Jun 26 '22 at 11:27
@Renato I have updated the question. Please take a look at the image I posted. — Tauseef_Ahmed, Jun 26 '22 at 13:05
sorry, maybe I wasn't clear, the important part of the OPTIONS request response is in the headers, can you show the response headers? — Renato, Jun 26 '22 at 15:16
Did you solve this? I'm having the same issue and I've added CORS config on AWS, cors package on Node app but still getting the same error — gustavozapata, Dec 15 '22 at 10:29
Yes I did. In my case, I was missing the port number that needs to be set on EB environment. In your EB environment, you can find the environment variables section. There you can add your port number. With the same name as you have added in the .env file of your code. — Tauseef_Ahmed, Dec 29 '22 at 16:03
If you could show me your EB log file, I may point you to actual error you're facing. — Tauseef_Ahmed, Dec 29 '22 at 16:04

score 0 · Answer 1 · answered Jul 04 '22 at 05:14

I think this is not a cors issue because you can see status code 502 means its bad gateway something is failing while you try to register operation.

if cors block your request won't hit your end-point so check your register method if there is any DB connection issue and are you sending a JSON response to the client

res.status(201).send({ message: 'Created' , response:data}); 
res.status(401).send({ "error":err});

you can also refer to this solution : angular http retrieve data with post request

I'll give it a shot. Thanks for pointing out. – Tauseef_Ahmed Jul 06 '22 at 14:20 — Tauseef_Ahmed, Jul 06 '22 at 14:20

score 0 · Answer 2 · answered Jul 05 '22 at 13:37

0

I think it is failing because your default cors options does not include options method.

Try following in your application: app.options('*', cors()). This will enable cors for preflight requests. You can read further about Why preflight happens,here.

answered Jul 05 '22 at 13:37

Mali Naeemi

187
1
10

It does. I have done everything in my understanding that could be causing the issue. Think I need to look at it with more attention – Tauseef_Ahmed Jul 06 '22 at 14:21

Unable to resolve CORS error on API deployed on Elastic Beanstalk

2 Answers2