CORS Policy between 2 subdomains of the same domain

Store Design
1

Hello,

I have a React application that is running on app.mydomain.com.

I have a Sophify shop on shop.mydomain.name.

The application just contains a button that do :

console.log('Button in iframe clicked')
const event = new CustomEvent('IframeButtonClicked', { detail: 'yo' })
window.parent.document.dispatchEvent(event)

On the Shopify page, I just have a custom HTML block that contains :

<iframe src="https://app.mydomain.com"/"></iframe> 
<script>
console.log('iframe loaded') window.document.addEventListener('IframeButtonClicked', handleEvent, false) function handleEvent(e) { console.log(e) }
</script>

When I click the button in the iframe, i can see the console.log from the App that says " Button in iframe clicked ", but the event is not Listened because of CORS Policy :

main.c765900428a1a28a.esm.js:2 Uncaught DOMException: Blocked a frame with origin "https://app.mydomain.com" from accessing a cross-origin frame.
    at https://app.mydomain.com/main.c765900428a1a28a.esm.js:2:15610
    at onClick (https://app.mydomain.com/main.c765900428a1a28a.esm.js:2:15637)
    at onClick (https://app.mydomain.com/main.c765900428a1a28a.esm.js:2:15033)
    at Object.Xe (https://app.mydomain.com/main.c765900428a1a28a.esm.js:2:87302)
    at He (https://app.mydomain.com/main.c765900428a1a28a.esm.js:2:87456)
    at https://app.mydomain.com/main.c765900428a1a28a.esm.js:2:105659
    at Rr (https://app.mydomain.com/main.c765900428a1a28a.esm.js:2:105753)
    at Cr (https://app.mydomain.com/main.c765900428a1a28a.esm.js:2:106167)
    at https://app.mydomain.com/main.c765900428a1a28a.esm.js:2:111803
    at Ne (https://app.mydomain.com/main.c765900428a1a28a.esm.js:2:187095)

The 2 apps are running in production mod inside 2 subdomains of the same domain : why do I have CORS problems ? Do i have to do something in the theme code ? Thx in advance !

Arthur