AWS Cloudfront POST request with signed cookies - angularjs

Question

I have a problem for POST request to cloudfront with signed cookies using custom policy.
Recently I changed domain. Before that both GET and POST requests worked well. Now POST request doesn't work.
I think I set up every thing same as before.
Detail situation is like this.
1.GET request to Cloudfront (domain: https://cdn.myexampledomain.com) from https://myexampledomain.com still works fine.
2.I use S3 as origin and GET/POST requests directly to S3 works fine. No CORS problem.
3.However, preflight request to Cloudfront fails.
and I got this error in console.
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'https://myexampledomain.com is therefore not allowed
access. The response had HTTP status code 403.
Funnier thing is when I click "replay XHR" in Chrome developer tool, POST request WORKS fine with signed Cookies and gets 201 Created response. This makes me crazy.
I tried CURL and POSTMAN to test POST request and both worked successfully as expected. This is not Chrome browser problem. Same happens in Safari, Firefox.
I am using AngularJS for client app. I suspected angular but GET/POST requests to S3 directly are fine. (and GET request to Cloudfront)
POST request body and cookie is like this.
Amazon S3 CORS is like follows.
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>https://myexampledomain.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
This is my custom policy. expireTime is set correctly.
{
"Statement": [
{
"Condition":{
"DateLessThan":{"AWS:EpochTime":expireTime}
}
}
]
}
and cloudfront behavior setting
I am spending two days for this problem. Any small help will be appreciated.

Answer 1

You can see in your OPTIONS response that CORS headers are not being set. That should be your first pointer.
Then look at your configurations of S3 and you can see that you are not setting CORS headers for OPTIONS request.
So add
<AllowedMethod>OPTIONS</AllowedMethod>
to your configurations, result:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>https://myexampledomain.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<AllowedMethod>OPTIONS</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
On your screenshot you can see that in cloudfront you have OPTIONS enabled already, so it should work now.
I am repalying to this because I have similar problem with ng-file-upload, not sending cookies with OPTIONS method and so my pre-flight is throwing error that it is unauthorized. When you fix your config, can you please post if you still get error so I know where the problem could be?