CropperComponent CORS errors using Src attribute

[nhwilly]

I'm just about finished integrating this. It's really great. Thank you so much for it.

But I have run into a little problem with attempting to use URL's for the Src attribute on the CropperComponent.

Here's a snippet:

<MudImage Src="@ImageUrl"></MudImage>
<img src="@ImageUrl"/>
<div class="img-container cropper-face-circle" style="visibility: @(isLoaded ? "visible" : "hidden")">
    <CropperComponent @ref="CropperComponent"
                        Src="@ImageUrl"
                        Options="Options"
                        OnReadyEvent="OnReadyEventHandler" />
</div>

When I put this in a dialog, the <MudImage> component and the standard <img> tag show the image just fine. But the CorpperComponent thows this error:

localhost/:1 Access to XMLHttpRequest at 'https://www.ebaymotorsblog.com/motors/blog/wp-content/uploads/2019/08/2020-Corvette-Stingray-Indianapolis-500-1600-617x400-740x480.jpg' from origin 'https://localhost:7075' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I left the link in there because it's a public site and you can use it for testing.

Both other links work, but the CropperComponent does not.

Here's another interesting bit...

When I attempted to use HttpClient to download the image, or even make a Head request to ensure it existed, I got the same error. I ended up rewriting my UI so that I could trigger the onerror and onloaded events from a MudImage component and just avoid validation altogether. It looks like you're running into the same issue.

I'm not skilled enough to look into their Javascript to figure out why it works for them and not me (or you), otherwise I'd find it and help out.

Let me know if I can help in any other way.

[MaxymGorn]

@nhwilly I see your point. I convince you need additional to set up CORS for image in cropper component. You can pass CORS rules as key/value in InputAttributes cropper component. You can see docs about CORS for image tag in this place: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/crossOrigin. Example filling input attributes for cropper:

public Dictionary<string, object> InputAttributes { get; set; } =
            new Dictionary<string, object>()
            {
                { "loading", "lazy" },
                { "test-Attribute", "123-test" } 
            };

You can try this InputAttributes for cropper component with anonymous crossorigin:

public Dictionary<string, object> InputAttributes { get; set; } =
            new Dictionary<string, object>()
            {         
                { "crossorigin", "" }  // or pass "anonymous" value (the same as empty string)
            };

In addition, you can credential attributes if it requires

[MaxymGorn]

Perhaps you need to add specific (CheckCrossOrigin) attribute for option to true/false: https://github.com/fengyuanchen/cropperjs#checkcrossorigin. I'm would investigate about this case for today...

[nhwilly]

YES!!

Thank you.

Setting the value of CheckCrossOrigin to false stopped the error.

Great fast response and a working solution.

👍