CORS issue: Angular 5 on AWS S3 & Cloudfront and .net core webapi on IIS10 EC 2 windows server 2019

Issue

I am getting following error while accessing Angular app through browser (chrome/Edge/Firefox/Opera). API request works on direct calls from well through Postman/Fiddler.

So i think there something between Cloudfront and EC2 calls and CORS policy

enter image description here

enter image description here

Following is my set up.

Angular Setup:

  • S3 Bucket with Public access Policy
  • Cloudfront with Behavior whitelisting Headers

enter image description here

.netcore web api setup:

  • EC 2 instance with Windows Server 2019
  • IIS 10 website with following httpresponse headers added SSL implemented
    enter image description here
  • As required I have addred CORS policy in .net core application as follows
    services.AddCors(options =>
            {
                options.AddPolicy("EnableCORS", builder =>
                {
                    builder.AllowAnyOrigin()
                        .AllowAnyHeader()
                        .AllowAnyMethod()
                        .AllowCredentials();
                });
            });

added CORS middleware

     app.UseCors("EnableCORS");

Have added required Annotation over APi Controllers

     [EnableCors("EnableCORS")]

Not sure what am i missing along this setup.

Solution

Finally got it worked with few changes to my setup of CORS in .netcore code and IIS. Following are the changes.

  • Upgraded my app from .netcore 2.2 to 3.0
  • I changed CORS Origion policy from AllowAnyOrigion() to WithOrigins("https://xxx.xxxx.com")
  • Removed IIS CORS module from IIS 10 web site.
  • Removed All CORS headers from IIS HTTP Response Headers

to sum it up instead of trying to manage CORS headers from IIS, I left it to Kestral.

Still not sure what was the exact issue.

Answered By – SKDesai

Answer Checked By – Cary Denson (AngularFixing Admin)

Leave a Reply

Your email address will not be published.