# CORS error when using setVirtualBackground on the SDK

**URL:** <https://devforum.zoom.us/t/cors-error-when-using-setvirtualbackground-on-the-sdk/86311>\
**Category:** Zoom Apps\
**Tags:** api, sdk\
**Created:** [April 8, 2023, 12:26am UTC](https://devforum.zoom.us/t/cors-error-when-using-setvirtualbackground-on-the-sdk/86311 "2023-04-08T00:26:25Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![waipapers](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/waipapers/32/46673_2.png) [@waipapers](https://devforum.zoom.us/u/waipapers)\
**Post date:** [April 8, 2023, 12:26am UTC](https://devforum.zoom.us/t/cors-error-when-using-setvirtualbackground-on-the-sdk/86311/1 "2023-04-08T00:26:25Z")

</div>

**Description**  
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**

```auto
[Error] Origin https://XXX.ngrok-free.app is not allowed by Access-Control-Allow-Origin. Status code: 200
[Error] Cannot load image https://mydomain.s3.us-east-2.amazonaws.com/myimage.png due to access control checks.
[Error] Failed to load resource: Origin https://XXX.ngrok-free.app 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**

```typescript
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**

```auto
`default-src *; style-src 'self' 'unsafe-inline'; script-src * 'self' https://appssdk.zoom.us 'unsafe-inline'; connect-src * 'self'; img-src 'self' data: https://images.unsplash.com data: https://mydomain.s3.us-east-2.amazonaws.com; 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

**Screenshots**

**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