Binaryify / vue-qr

The Vue Component for Awesome-qr.js
MIT License
851 stars 123 forks source link

Access-Control-Allow-Origin CORS policy: #143

Open ArnurArykbaev opened 1 year ago

ArnurArykbaev commented 1 year ago

Access to image at 'someMyURL' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

The image appears in img tag, but in vue-qr it gives an error

Vitomir2 commented 1 year ago

@ArnurArykbaev , I also was facing this problem and I made a workaround by opening the file, then converting it to base64 and put that in the logoSrc. I do not have read file thing anymore, because I load the image from user input (image uploader), but this is my converter to base64:

export function convertFileToBase64(fileObject) {
    return new Promise(async (resolve, reject) => {
        try {
            const reader = new FileReader()
            reader.readAsDataURL(fileObject)
            reader.onloadend = function() {
                const base64data = reader.result
                resolve(base64data)
            }
        } catch (error) {
            reject(error)
        }
    })
}

However, if someone knows how to solve this error, and not just workaround, I will be happy to hear that. I have some cases where the image will be taken form AWS S3 Bucket, which gives me exactly the same error when running it locally.