CORS error when using setVirtualBackground on the SDK


I’m trying to set a virtual background of an image that is clearly loaded in the client (I can see the image in the react app). I added a functionality to set that image as a virtual background when the user clicks on a button, but when I call that I get the following error

It used to work for a few days for me but now it’s totally broken and I’ve been stuck for two days now. Please help!

Browser Console Error

[Error] Origin is not allowed by Access-Control-Allow-Origin. Status code: 200
[Error] Cannot load image due to access control checks.
[Error] Failed to load resource: Origin is not allowed by Access-Control-Allow-Origin. Status code: 200 (myimage.png, line 0)

Which Web Meeting SDK version?
"@zoom/appssdk": "^0.16.11",

Meeting SDK Code Snippets

async function configureZoom() {
  try {
    await zoomSdk.config({
      version: "0.16",
      capabilities: ["setVirtualBackground"],
  } catch (err) {
    console.log(err, "Error initializing Zoom SDK");

export async function selectVirtualBackground(fileUrl: string) {
  try {
    await configureZoom();
    await zoomSdk.setVirtualBackground({ fileUrl });
  } catch (err) {
    console.log("Error setting virtual background", err);

My content Security Policy

`default-src *; style-src 'self' 'unsafe-inline'; script-src * 'self' 'unsafe-inline'; connect-src * 'self'; img-src 'self' data: data:; base-uri 'self'; form-action 'self';`

To Reproduce(If applicable)
Steps to reproduce the behavior:

  1. Open the app, see all the images
  2. Click on any of the images you want as a Background
  3. See the error message


Troubleshooting Routes

  • I added both the ngrok domain and my CDN domains to the Allow Domains List

Device (please complete the following information):

  • Device: Macbook Pro
  • OS: macOS 13
  • Browser: Zoom Client
  • Browser Version Latest

Additional context
This is a Remix app