Applying AWS Cloudfront signed cookie to hls content sometimes causing CORS issue

Question

I am currently using aws S3 + Cloudfront for my video streaming platform. As we are serving hls content, so we applied signed cookie to protect our data (.m3u8 & .ts segments inside).

I have already set my domain https://example.com as AllowedOrigin in my S3 bucket CORS.

And My Cloudfront "Cache Based on Selected Request Headers" is None.

However, the browser prompts this CORS error SOMETIMES, but not always!! (Having no idea of what it happens!!!)

Access to XMLHttpRequest at 'https://cdn.example.com/index.m3u8' from origin 'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

But sometimes it works. P.S. I am using Dplayer with custom hls.