AWS CloudFront Signed Cookies CORS Issue

Question

I am getting following error with cloudfront signed cookies implementation

Access to XMLHttpRequest at ' https://a.xyz.com/test.html ' from origin ' https://b.xyz.com ' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I am accessing a file at a.xyz.com (Domain 1) from b.xyz.com (Domain 2). This was working fine before restricting viewer access(using Signed cookie) for cloud front (Domain 1) distribution.

My S3 CORS configuration for bucket having domain 1 assets is

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

I have tried setting following whitelist headers in cloudfront behavior settings

Access-Control-Request-Headers
Access-Control-Request-Method
Origin

But I am still getting the above error.

Note : If I open the file https://a.xyz.com/test.html in new tab it is working fine ie signed cookies are created successfully.

How can I fix this ?

Answer 1

For CORS to be used with cookies, you need to use Access-Control-Allow-Credentials

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials

Also Access-Control-Allow-Origin must not be * , and XHR need to be fired with withCredentials

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials