qrcode-vue3 CORS issue intermittently - laravel

Question

I am using this package - qrcode-vue3 in my Laravel Vue project.
I am creating a QR code in various places of the app, each of which contains an logo image supplied via the component options:
<template>
<QRCodeVue3
v-bind="qrOptions"
/>
</template>
<script>
import QRCodeVue3 from "qrcode-vue3";
import {computed} from "vue";
import {useStore} from "vuex";
export default {
name: "QrGenerator",
components: {
QRCodeVue3,
},
props: {
qrData: {
type: String,
default: undefined,
},
withSquareLogo: {
type: Boolean,
default: true,
},
width: {
type: Number,
default: 300,
},
height: {
type: Number,
default: 300,
},
download: {
type: Boolean,
default: true,
},
downloadFileName: {
type: String,
default: undefined,
},
},
setup(props) {
const store = useStore();
const colors = computed(() => store.getters['whiteLabel/colors']);
const logos = computed(() => store.getters['whiteLabel/logos']);
const qrOptions = computed( () => ({
"backgroundOptions": {
"color": "#ffffff"
},
"backgroundOptionsHelper": {
"colorType": {
"gradient": false,
"single": true
},
"gradient": {
"color1": "#ffffff",
"color2": "#ffffff",
"linear": true,
"radial": false,
"rotation": "0"
}
},
"cornersDotOptions": {
"color": "#000000",
"type": ""
},
"cornersDotOptionsHelper": {
"colorType": {
"gradient": false,
"single": true
},
"gradient": {
"color1": "#000000",
"color2": "#000000",
"linear": true,
"radial": false,
"rotation": "0"
}
},
"cornersSquareOptions": {
"color": "#000000",
"type": "extra-rounded"
},
"cornersSquareOptionsHelper": {
"colorType": {
"gradient": false,
"single": true
},
"gradient": {
"color1": "#000000",
"color2": "#000000",
"linear": true,
"radial": false,
"rotation": "0"
}
},
"value": props.qrData,
"dotsOptions": {
"color": colors.value.primary_color,
"type": "extra-rounded"
},
"dotsOptionsHelper": {
"colorType": {
"gradient": false,
"single": true
},
"gradient": {
"color1": colors.value.primary_color,
"color2": colors.value.primary_color,
"linear": true,
"radial": false,
"rotation": "0"
}
},
"image": logos.value.square,
"imageOptions": {
"hideBackgroundDots": true,
"imageSize": 0.4,
"margin": 0,
"crossOrigin": "Anonymous"
},
"margin": 0,
"qrOptions": {
"errorCorrectionLevel": "Q",
"mode": "Byte",
"typeNumber": "0"
},
"download": false,
"height": props.height,
"width": props.width
}));
return {
logos,
colors,
qrOptions,
}
}
};
This works OK for some of the time, with logo loading into the QR code. The logo is in a static assets S3 bucket, that is public access and allow-origins of "*". The domain to the static assets bucket (https://static.myapp.com.au) is being proxied via CloudFlare.
But for some of the time I get a CORS error as the component is mounting and generating the QR:
Access to image at 'https://static.myapp.com.au/logo_square.png' from origin 'https://lins.myapp.com.au' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. index.js?f95a:1
GET https://static.myapp.com.au/logo_square.png net::ERR_FAILED 200
It has wasted a bunch of time now but without luck in finding the solution. It will work consecutively for a number of tries (say 20 times), then try again some minutes later and Bang! CORS error.
Thanks