CORS issue using AWS Cloudfront with Signed Cookies. AllowedOrigin not getting set to what is passed in the Header

Question

To give context how this is different from the other question (for which this has been marked duplicate.

The application on https://subdomain.domain.com is in PHP and it creates the signed cookie and sends to the client. Along with the cookie I have tried setting the header (have also tried without setting this header)
header("Access-Control-Allow-Origin: https://subdomain.domain.com");

Expected behaviour: Access-Control-Allow-Origin : https://subdomain.domain.com
Actual behaviour: Access-Control-Allow-Origin : *

If in s3 I set CORS to <AllowedOrigin>https://subdomain.domain.com</AllowedOrigin> things are fine. But I will also be accessing this from subdomain2 and subdomain3.

So how to I change the origin based on context?

Rest remains the same to give more context to the reader:
++++++++

Access-Control-Allow-Origin is not getting set to the correct origin 'https://subdomain.domain.com'

On Safari (on Mac) everything is fine and the video plays properly.
On Chrome and Firefox I get the following error

Access to XMLHttpRequest at 'https://media.domain.com/folder/part1/part1.m3u8' from origin 'https://subdomain.domain.com' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

I have setup a an s3 bucket with the required CORS configuration. The Cloudfront distribution whitelists Origin, Access-Control-Allow-Origin & Access-Control-Allow-Methods. "Forward Cookies" is set to all.

The signed cookie is set for the a folder which contains .m3u8 and .ts files

1. s3

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

2. CF .
   

CNAME: media.domain.com
Custom Wildcard SSL: *.domain.com

Two origins:
subdomain.domain.com
s3 bucket

Three behaviours:

1. default - points to subdomain.domain.com
2. *.m3u8 - points to the s3 bucket
3. *.ts - points to the s3 bucket

3. JWPlayer

withCredentials: 'true',
onXhrOpen: function(xhr, url) {                                            
    xhr.setRequestHeader("Access-Control-Allow-Headers","Content-Type, Accept, X-Requested-With");
    xhr.setRequestHeader("Access-Control-Allow-Origin","https://subdomain.domain.com");
    xhr.setRequestHeader("Access-Control-Allow-Credentials","true");
}

Request & Response

General:

Request URL: https://media.domain.com/folder/part1/part1.m3u8
Request Method: GET
Status Code: 200 
Remote Address: 54.230.71.77:443
Referrer Policy: no-referrer-when-downgrade

Response Headers:
accept-ranges: bytes
access-control-allow-methods: GET, HEAD
access-control-allow-origin: *
access-control-expose-headers: ETag
access-control-max-age: 3000
age: 9566
content-length: 686
content-type: application/x-mpegURL
date: Wed, 11 Sep 2019 09:32:35 GMT
etag: "626d2a3acf31a80ed709de0ddaf8e9a6"
last-modified: Fri, 06 Sep 2019 07:52:42 GMT
server: AmazonS3
status: 200
vary: Origin,Access-Control-Request-Headers,Access-Control-Request-Method
via: 1.1 5324246cfb52c8bfaf71104a45e6ce53.cloudfront.net (CloudFront)
x-amz-cf-id: LJ9F80PYJsSXkl-QO-nKFrRdqK8Hsy6Hc8dZ49t75bsx6u9RFmspzw==
x-amz-cf-pop: BLR50-C1
x-cache: Hit from cloudfront

Request Headers:
Provisional headers are shown
Origin: https://subdomain.domain.com
Referer: https://subdomain.domain.com/test/testcfurl
Sec-Fetch-Mode: cors
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36

On Safari (on Mac) the requested video plays fine.
Chrome and Firefox gives and error "The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'"

Any help is appreciated. Have tried out everything mention in hls.js CORS using AWS Cloudfront issues with Cookies

Answer 1

I had the same problem with AWS S3. Did you tried on POSTMAN tool if CloudFront returns 'Access-Control-Allow-Origin: *' parameter in the response? S3 doesn't send it back if 'Origin' parameter is not present in the header request, which BTW you cannot modify since it is sent automatically by the browser.