Search code examples
amazon-web-servicesamazon-ec2corsamazon-cloudfrontamazon-elb

CORS request did not succeed - Cloudfront and ELB over HTTPS

When we access backend api of ELB an https url, throws an error

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://abcde-1xx8x3xx3x.ap-south-1.elb.amazonaws.com/api/auth/testapi. (Reason: CORS request did not succeed).

Frontend: We are using Cloudfront to deliver frontend from S3. The cloudfront URL link works and the page loads fine.

On cloudfront side in behaviour section,

  1. whitelisted the headers [Accept, Access-Control-Allow-Origin, Access-Control-Request-Headers, Access-Control-Request-Method, Authorization, Content-Type, Referer, X-Access-Token, X-HTTP-Method-Override, X-Requested-With]
  2. Viewer Prorocol Policy - Redirect HTTP to HTTPS
  3. Allowed HTTP Methods - GET, HEAD, OPTIONS, PUT, POST.....

Backend: Backend nodejs rest api is in EC2 and delivered via Classic Load Balancer internet facing. EC2 is within VPC. We are using ELB URL for API testing. The API works in Postman. Here, we have used Load balancer protocol as HTTPS and instance protocol as HTTP. There is a SSL certificate attached to this.

on the nodejs application, we are setting headers as below 

res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Request-Method', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');    
res.header('Access-Control-Allow-Headers','Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With, Access-Control-Allow-Origin, Origin, X-HTTP-Method-Override, Accept, X-Access-Token');
res.setHeader('Access-Control-Allow-Credentials', 'true');

on the fontend code while using fetch api, we are setting mode: 'cors'

Tried looking in to other similar cors issues, but nothing helped.

Can anyone suggest me on how to solve this cors issue, what am i missing here? Or is there a better way to handle this for production?

Solution

  • This isn't actually a CORS error. It's a connectivity problem that happens to involve a CORS request.

    Reason: CORS request did not succeed

    The HTTP request which makes use of CORS failed because the HTTP connection failed at either the network or protocol level. The error is not directly related to CORS, but is a fundamental network error of some kind.

    https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSDidNotSucceed

    You have presumably modified the URL https://abcde-1xx8x3xx3x.ap-south-1.elb.amazonaws.com/api/auth/testapi somewhat, but note that it is impossible to use HTTPS on a URL ending with .elb.amazonaws.com. This is because it is impossible to get an SSL certificate for an amazonaws.com domain name -- that is Amazon's domain name, not your domain name. You can't get an SSL certificate for a domain you don't really control. You need your own domain, here, and an SSL certificate to match it, attached to the balancer.

    You should find that by punching this API URL directly into the address bar of your browser, you also get an error. That error will not be a CORS error, and it is the actual error that you need to resolve.

    Note also that your S3 and CloudFront settings are not involved in the error you have described.