Tutorials

Setting up WebViewer for CORS with xdomain

This tutorial takes you through the steps of setting up CORS with WebViewer through the xdomain library. It is assumed that you have already set up a WebViewer project and have your documents hosted on another domain which you control.
Requirements: two HTTP servers

  1. Find xdomain.js in the WebViewer download under lib/html5/external/. Copy this file to the server where your documents are hosted.
    Note: 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.
  2. Create an html file called proxy.html. An example file is included under tutorials/xdomain-files. The contents should look something like this:
                                    
    <!DOCTYPE HTML>
    <script src="xdomain.js" master="http://www.mywebviewerserver.com"></script>
                                    
                                
    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.
  3. 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:
                                    
    new PDFTron.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.
  4. 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.
                                    
    new PDFTron.WebViewer({
      xdomainProxyUrl: {
        "http://mydocumentserver.com": "/proxy.html",
        "http://myotherdocumentserver.com": "/proxy.html"
      },
      ...
      ...
    }, viewerElement);