AWS Cloudfront gives a CORS error with AWS S3 as origin

Question

I had hosted a webapp on S3 and we used the S3 Hosting link to access the webapp. We have a Login option on the App that calls the Okta sign in link from within. Everything was working fine on the S3 link and I had enabled the Okta link on the S3 CORS as allowed origin. I recently added the S3 Origin to Cloudfront, now, I'm not able to procees with the Login as the Okta link is being blocked by CORS Policies.

Details :

The entire site is working normally as expected.
The CORS issue only comes up on the Cloudfront link. No CORS errors come up when using the S3 static link. ( as the S3 CORS have been added to allow Okta links )
Error that comes up : Cross origin resource sharing error: PreflightMissingAllowOriginHeader.

Access to fetch at 'https://{my_okta_org}.okta.com/api/v1/authn' from origin 'https://{cloudfront_release}.cloudfront.net' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Questions:

What Config changes do I have to add on Cloudfront to allow the allowed CORS on S3?

Reference:

Other Details :

CORS allowed in S3:

    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE",
            "HEAD"
        ],
        "AllowedOrigins": [
            "https://{my_okta_url}.okta.com"
        ],
        "ExposeHeaders": []
    },

Cloudfront Details :

stackoverflow.com/questions/50299204/… see this will help you. — aviboy2006
Hi @aviboy2006 Thanks for recommending the solution, but the issue does not seem to be with error handling. It's actually CORS based. I'm unable to forward origins to S3 from cloudfront. — Raghav Mishra

Rich Dudley Rich Dudley · Accepted Answer · 2021-03-22T14:22:21

This is an issue between CloudFront and Okta, S3 isn't involved in your request pipeline yet. The preflight issue is very common, and it's working as designed, and the error message is telling you exactly what you need to do. I'm not familiar with Okta, but it looks like you may have configured it to accept traffic from S3, and you need to change that to accept traffic from CloudFront. Alternatively, your CloudFront configuration needs to add the "Access-Control-Allow-Origin" HTTP header to the request from CloudFront to Okta, and (preferred) list the CloudFront origin specifically rather than using a wildcard. An overview of this header is https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin.

AWS Cloudfront gives a CORS error with AWS S3 as origin

3 Answers