Find & replace the cdn.bubble.io URL for your app's domain URL to fix CORS policy issues (not for private files)

Problem: Your app is saving files under the bubble.io domain / URL and not app. and then you’ve got a workflow blocked by the CORS policy. You can’t edit the CORS policy, it’s set by bubble.

Console error

Access to fetch at ‘https://yourdomain.cdn.bubble.io/f000000000000000x00000000000000000000/filename.ext’ from origin ‘https://app.yourdomain’ 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.’

^ an annoying error when the file is not private, yet the workflow is blocked. Why? Maybe it’s a bug, I don’t know, it was happening to me and I needed a workaround.

My workaround was to run a regex find and replace for the content that references these files. It doesn’t change the location but both URLs still serve the file, and it stops workflow-based CORS policy conflicts.

Find:
https?://(?:[^/]*.(bubble.io))(/version-test)?/(?:fileupload/)?

Replace with:
https://app.yourdomain/ Isn’t live version:format as text fileupload

Note: the isn’t live version is a yes/no formatted with yes being version-test/ and no being blank, so it works on both the development and live servers. More elegant solutions welcome but this seems to work for me so sharing just FYI.