CORS for IE9

IE9 does not support cross origin requests so to allow WebViewer to load documents located on another domain you need to use the XDomain library.

Please Note!

We only recommend using XDomain if you need to use CORS and also support IE9. If you don't need to support IE9 then we recommend that you enable CORS on your server in the standard way.

See here for how to enable CORS without XDomain https://enable-cors.org/server.html.

If you need to support IE9 or you're really really sure that you need to use XDomain for another reason then continue on through this guide.

Setting up

It is assumed that you have already set up a WebViewer project and have your documents hosted on another domain which you control.

1. Find xdomain.js in the WebViewer download under lib/ui-legacy/external/. Copy this file to the server where your documents are hosted.

Make sure to use this file instead of the one on the xdomain.js GitHub page as there have been modifications done to work with WebViewer.

1. Create an html file called proxy.html. The contents should look something like this:

HTML

<!DOCTYPE HTML>
<script src="xdomain.js" master="http://www.mywebviewerserver.com"></script>

Shell

The src should point to the xdomain.js file you just uploaded and master should be set to the server where your viewer is located. This script sends the actual requests for the document so that they come from the same domain.

1. Back in your viewer code, find the place where you call new PDFTron.WebViewer({...}). Add the option xdomainProxyUrl to the constructor so that it looks something like this:

JavaScript

WebViewer({
  xdomainProxyUrl: "http://mydocumentserver.com/proxy.html",
  initialDoc: "http://mydocumentserver.com/myxod.xod",
  ...
  ...
}, viewerElement);

The value of the property should be the URL of the proxy.html file you added previously.

1. If all of this has been done correctly WebViewer should now be able to load and view documents from the other domain.xdomain.js also allows multiple proxy URLs to be specified, so alternatively you could pass an object to WebViewer that specifies these URLs. See the XDomain documentation for more details.

JavaScript

WebViewer({
  xdomainProxyUrl: {
    "http://mydocumentserver.com": "/proxy.html",
    "http://myotherdocumentserver.com": "/proxy.html"
  },
  ...
}, viewerElement);