blocked by CORS policy

[DemonicCodeSlayer]

loadImage( 'https://st.grafia.ink/media/upload/46b38f192dfeb27362d03bd8234e28a5.jpg, (img, data) => { console.log(data); }, { meta: true }, )

response - "Access to fetch at 'https://st.grafia.ink/media/upload/46b38f192dfeb27362d03bd8234e28a5.jpg' from origin 'http://localhost:3100' 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"

How do I put mode: "no-cors" in loadImage?

[blueimp]

loadImage will try to fetch an image provided via URL as Blob object if it determines that meta data (e.g. EXIF) is required, e.g. by setting the option meta:true as in your example:

JavaScript-Load-Image/js/load-image.js

Lines 169 to 173 in 5dcae76

	if (loadImage.requiresMetaData(options)) {
	loadImage.fetchBlob(file, fetchBlobCallback, options)
	} else {
	fetchBlobCallback()
	}

It will fall back to load the img directly via its URL if the Blob cannot be loaded - so in many cases, you can ignore such an error message:

JavaScript-Load-Image/js/load-image.js

Lines 141 to 149 in 5dcae76

	if (blob && isInstanceOf('Blob', blob)) {
	file = blob // eslint-disable-line no-param-reassign
	url = createObjectURL(file)
	} else {
	url = file
	if (options && options.crossOrigin) {
	img.crossOrigin = options.crossOrigin
	}
	}

To set the no-cors option for the fetch request. you can provide it as option to loadImage, as all options are passed on to the fetch call:

loadImage(url, callback, {
  mode: 'no-cors',
  meta: true
})

However, this will very likely lead to an error accessing the Blob and you won't be able to load the image at all.

So my recommendation is to either fix the CORS headers on the server-side from where you want to load the image, or accept that you won't be able to load meta data and fall back to loading the image only.