CORS policy issue

[1wiseash]

Hi Guys, Amazing editor based on the example and my almost-working code. This is probably not a problem with your package, but something I'm not doing in my Angular and/or hosting (Firebase) configuration. I am getting the following error when I run locally or from the live site: Access to Image at 'https://firebasestorage.googleapis.com/...' from origin 'https://firebasestorage.googleapis.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https:// ... .firebaseapp.com' is therefore not allowed access. I've searched SO and found a five page answer to the problem, but thought maybe you have run into this already and know precisely (that is to say, in less than five pages) how to fix the problem. Thanks in advance, Ashley

[1wiseash]

Per SO five-page answer, I added a cors proxy to my photo url and it removed the previous error, but is giving me a new error: "400 (Header required)" The revised code based on your example code:

    openEditor(photo: Photo) {
        const proxyurl = "https://cors-anywhere.herokuapp.com/";
        const dialogRef = this.dialog.open(NgxImageEditorComponent, {
            width: '800px',
            height: 'auto',
            data: {
                name: photo.name,
                url: proxyurl + photo.url,
                type: 'image/jpeg'
            }
        });

        dialogRef.afterClosed().subscribe(result => {
            console.log('The editor was closed');
            console.log(result);
        });
    }

I will continue to work the problem and report back if I figure out anything. Thanks, Ashley

[hggeorgiev]

@Taulantdisha

[mrtmeeseeks]

@1wiseash if you are using firebase images, they have a token. We had this issue before and as far as I remember you need to cors-json-file in your project. See: https://cloud.google.com/storage/docs/gsutil/commands/cors