I would like to load the image from the AWS S3 bucket using the pre-signed URL for image cropping purpose. I'm using the ngx-image-copper and here's my code:
app-cropper.component.ts:
getBase64FromImageUrl(url: string) {
this.httpClient
.get(url, { responseType: 'blob' } })
.subscribe((blob) => {
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.addEventListener('load', () => {
this.imageBase64 = reader.result;
});
})}
app-cropper.component.html:
<image-cropper
class="ly-cropper"
id="cropper"
*ngIf="imageBase64; else spinner"
[imageFile]="imageBase64"
[maintainAspectRatio]="isMaintainAspectRatio$ | async"
[aspectRatio]="ratio"
[autoCrop]="true"
format="{{ asset?.fileType }}"
(imageCropped)="onImageCropped($event)"
(imageLoaded)="onImageLoaded()"
(cropperReady)="onCropperReady()"
(loadImageFailed)="onImageLoadFailed()"
[cropper]="cropper"
[canvasRotation]="canvasRotation"
></image-cropper>
<ng-template #spinner>
<ly-spinner mode="indeterminate" color="gray"> </ly-spinner>
</ng-template>
<div *ngIf="isLoading$ | async" class="loading-overlay">
<ly-spinner mode="indeterminate" color="gray" [diameter]="200" [showLabel]="false"></ly-spinner>
</div>
With most browsers, the image loading works perfectly fine. However, only in the Chrome browser, I keep getting the error saying that
Access to XMLHttpRequest at 'xxx' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested
I checked most of the posts which are related to the CORS issue with the S3 bucket, and the S3 configuration has been configured as follows. But the CORS issue specifically happening in Chrome still couldn't be fixed. Does anybody know how can I fix this？
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": []
}
]
