Best practice for creating APIs that can be called from other domains

[tim-m]

Hi! I'm building a number of APIs via NodeRED (on a Cloud) that I want to expose and want to get it right in terms of security and cors. I've secured the routes exposed by the HTTP In nodes using basic authentication. I can call those fine from external apps EXCEPT when it comes to using DropzoneJS. I can upload files via DropzoneJS fine but when I try and display image files (that would be displayed as thumbnail) that have already been uploaded I get cors errors. Does anyone have any best practice info about handling cors with nodeRED?

This is the error I get from DropzoneJS:

dropzone.min.js:1 Uncaught DOMException: Failed to execute 'getImageData' on 
'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
 at detectVerticalSquash 
(https://[mysite]/packages/dropzone-5.7.0/dist/min/dropzone.min.js:1:44867) 
at drawImageIOSFix (https://[mysite]/packages/dropzone-5.7.0/dist/min/dropzone.min.js:1:45025) 
at https://[mysite]/packages/dropzone-5.7.0/dist/min/dropzone.min.js:1:30055 at 
e (https://[mysite]/packages/dropzone-5.7.0/dist/min/dropzone.min.js:1:29266) at 
HTMLImageElement.d.onload (https://[mysite]/packages/dropzone-
5.7.0/dist/min/dropzone.min.js:1:29414)

||detectVerticalSquash|@|dropzone.min.js:1|
| --- | --- | --- | --- |
||drawImageIOSFix|@|dropzone.min.js:1|
||(anonymous)|@|dropzone.min.js:1|
||e|@|dropzone.min.js:1|
||d.onload|@|dropzone.min.js:1|
||load (async)|||
||value|@|dropzone.min.js:1|
||value|@|dropzone.min.js:1|
||(anonymous)|@|avatar:1073|
||Promise.then (async)|||
||(anonymous)|@|avatar:1060|
||Promise.then (async)|||
||(anonymous)|@|avatar:977|

[TotallyInformation]

I don't have any experience with that library so I can't be certain but I wonder if it tries to load some resources from a different domain? If so, you will have to configure CORS to allow for that. Maybe disable CORS, lot the endpoint and use the browser dev tools to see exactly what it does.