> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/advanced/cross-origin-workers.md).

# Cross origin workers

Learn how to efficiently manage cross origin workers in WebViewer by placing worker files on a CDN or external server. Utilize setWorkerPath and setLocalWorkerPath APIs for seamless integration using

In some situations you may want to place the large WebViewer worker files on a CDN or some other external server. It's possible to put the entire WebViewer `lib` folder on another domain however this has [some downsides](/web/what-is-webviewer/wv-inside.md#loading-webviewer-from-another-domain), so only moving the core files is often a good compromise.

We provide a few APIs to help accomplish this, [`setWorkerPath`](https://sdk.apryse.com/api/web/Core.html#.setWorkerPath__anchor) and [`setLocalWorkerPath`](https://sdk.apryse.com/api/web/Core.html#.setLocalWorkerPath__anchor).

## First step: Setting path to worker files on remote domain

The first step is to copy the core files and their resources to your external server. Once you [download WebViewer](/web/get-started/readme.md), find the following folder:

* `lib/core`

This is the only folder you need to copy to your CDN or other external server.

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-7336cfca4b87ba4fe07ad61807afe854b97476cd%2Fe2f74c4ae0a6e1315194ee1389d50e5f237beec6-1546x157.png?alt=media)

Now you need to tell WebViewer where the workers live. To do this, pass an accessible, absolute path to your folder into the [`setWorkerPath`](https://sdk.apryse.com/api/web/Core.html#.setWorkerPath__anchor) function.

Add the following code to the top of your [config file](/web/advanced/config-files.md).

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
// config.js

// Step 1:
Core.setWorkerPath('http://www.my-server.com/external/core');
```

{% endcode %}
{% endtab %}
{% endtabs %}

Make sure the path you pass in contains all the worker folders, and that they are publicly accessible.

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-555a767687d902d4ebccaeb19b7be70bb89abc5e%2Ff1bc9aaa99496be7a46be8b74840371a675a9e07-970x330.png?alt=media)

## Second step: Setting path to worker files on app domain

In order for us to load these workers from an external domain, we need to use local workers that load the external workers. This is because remote workers cannot be directly loaded from the browser because of security restrictions.

WebViewer needs to know where these local workers exist, and we can use the [`setLocalWorkerPath`](https://sdk.apryse.com/api/web/Core.html#.setLocalWorkerPath__anchor) API to help it find them.

The path that you pass to [`setLocalWorkerPath`](https://sdk.apryse.com/api/web/Core.html#.setLocalWorkerPath__anchor) must be on the same domain as your app, and is relative to the index file of the UI, which is usually `lib/ui/index.html`. The path must point to the folder that contains `CORSWorker.js` and `Worker.js`, which in most cases is `lib/core`.

Add the following code underneath the code you added above (in your [config file](/web/advanced/config-files.md)).

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
// config.js

Core.setWorkerPath('http://www.my-server.com/external/core');

// Step 2:
// Relative to the ui's index.html file
Core.setLocalWorkerPath('../core');

// Or you can pass an absolute path
// Core.setLocalWorkerPath('/public/lib/core');
```

{% endcode %}
{% endtab %}
{% endtabs %}

That's it! Your worker files will now be loaded from your CDN or external server.

## Cross origin workers in WebViewer WebComponent

WebViewer WebComponent does not utilize config files and setting up remote workers is almost the same with slight differences. You can call [`setLocalWorkerPath`](https://sdk.apryse.com/api/web/Core.html#.setLocalWorkerPath__anchor) and [`setWorkerPath`](https://sdk.apryse.com/api/web/Core.html#.setWorkerPath__anchor) APIs directly after the WebComponent promise resolves.

Follow the [step one](#first-step-setting-path-to-worker-files-on-remote-domain) and [step two](#second-step-setting-path-to-worker-files-on-app-domain) as shown above to setup remote worker. You can also copy UI resource files if you would like.

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-b1de3c6a5d5ad090772e09076a4ef47bff49d6d2%2F115861dfc285ad13605b072859a9248c593f1a6e-2000x348.png?alt=media)

Make sure you also place the `CORSWorker.js` and `Worker.js` files on the same domain as your app as shown in [step two](#second-step-setting-path-to-worker-files-on-app-domain).

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
WebViewer.WebComponent(
  {
    path: 'http://www.my-server.com/webviewer/lib',
    initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf',
  },
  document.getElementById('viewer')
).then((instance) => {
  instance.Core.setLocalWorkerPath('../../../lib/core');
});
```

{% endcode %}
{% endtab %}
{% endtabs %}

Additionally, if you're enabling content edit feature of the WebViewer you also need to set the path for the content edit workers using [`Core.ContentEdit.setResourcePath`](https://sdk.apryse.com/api/web/Core.ContentEdit.html#.setResourcePath__anchor) and [`Core.ContentEdit.setWorkerPath`](https://sdk.apryse.com/api/web/Core.ContentEdit.html#.setResourcePath__anchor).

## Troubleshooting

If you receive cross origin errors accessing the worker files on the other domain then make sure that you have the `Access-Control-Allow-Origin` header on these resources, otherwise they won't be able to be loaded from the other domain.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.apryse.com/web/advanced/cross-origin-workers.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.