I have a file input for uploading images which is working great on desktop but I am having an issue with mobile.
<input type="file" class="customerImage" id="customerImage" name="myfile" accept="image/*">
If I choose a previously taken photo from my mobile gallery then the fetch request works nicely and all is good.
However an issue arises if I use my camera to take an image directly. On mobile I will click the ‘Choose file’ button where I am prompted to choose an existing image or ‘Camera’ which opens my camera to take a new image.
If I take a new image and try to upload it, then I am getting blocked by CORS
Access to fetch at ‘https://media.domain.com/api/v1/media/upload’ from origin ‘https://development.domain.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.
I am using a Xiaomi Redmi Note 7 on Android and the bug is consistent across multiple browsers, but I do not have another mobile device to test with.
Anyone have any clues on why CORS is blocking my request when I am trying to POST with an image from my camera, when it works fine sending a POST with an image from my phone storage?