Currently, I am utilizing an npm package known as vue-cropper.js for image cropping and subsequent upload to a server. However, I am encountering an issue with the uploading process of the cropped image due to a CORS error. Interestingly, when I attempt to upload an uncropped image, there are no errors and it works perfectly. This inconsistency has left me puzzled about where I could be going wrong.
Despite reviewing the cropper.js documentation multiple times, the instructions provided involve creating a blob and appending it to form data followed by a POST request. Surprisingly, this is exactly what I have been implementing.
Below is the template for the cropper component:
<vue-cropper
v-show="imageSrc"
class="vue-cropper"
ref="cropper"
:guides="true"
:view-mode="1"
drag-mode="crop"
:background="true"
:rotatable="true"
:aspect-ratio="1"
:src="imageSrc"
alt="Image"
></vue-cropper>
Furthermore, here is my code snippet responsible for the cropping and uploading functionalities:
crop() {
this.$refs.cropper
.getCroppedCanvas({
width: 200,
height: 200
})
.toBlob(blob => {
const formData = new FormData();
formData.append("photo", blob, 'avatar');
this.uploadImage(formData);
});
},
rotate() {
this.$refs.cropper.rotate(90);
},
uploadImage(formData) {
const token = getCookie("ifragasatt_cookie");
const url = "https://vem-user.fjardestatsmakten.se/userProfilePic";
const headers = {
"Content-Type": "multipart/form-data",
"Access-Control-Allow-Origin": "*",
"ifr-jwt-token": token
};
axios.post(url, formData, { headers });
}
}
My expectation is to receive an "ok" response from the endpoint after successful upload. However, the actual result shows:
POST https://vem-user.fjardestatsmakten.se/userProfilePic 502
my-profile:1 Access to XMLHttpRequest at 'https://vem-user.fjardestatsmakten.se/userProfilePic'
from origin 'http://localhost:8080' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.