Search code examples
google-chromecorsfroala

Chrome CORS blocks blob post


Im using FROALA to drag and drop image onto my web page and then save them on the sever. This works fine if do it from the same domain. However, if I use different ports (to simulate separate severs) then I have to implement CORS and CORS gives the error

Failed to load localhost:8082/image_upload: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

The image url being passed is:

blob:http://localhost:8081/e6f58adc-6a76-40b1-a0d4-09acdda624d2

So CORS isn't accepting blob: in the url and blocks it. Any ideas how to get around this? Note: I can make other requests to the server and CORS works fine, it's just this blob link that is triggering the error.

Server: Express JS + NodeJS Client: Express JS + NodeJS + Froala component. Browser: Chrome


Solution

  • I'm one of the guys from Froala. We're inserting the image as blob so that we can preview it while uploading to the server. What we'd recommend if you would like to avoid it is to use the image.beforeUpload event and inside the callback, upload the image on your own. In the Help Center, there is an example which you could use as a starting point: https://wysiwyg-editor.froala.help/hc/en-us/articles/115000555949-Can-I-insert-images-as-base64-.