PDFTron WebViewer - CORS error on trying to display XOD file stored in Azure BLOB storage

Question

I am using WebViewer 2.2.2 and trying to show on an ASP.NET MVC 5 view an XOD file stored in Azure Blob storage, url as : https://somename.blob.core.windows.net/containername/GettingsStarted.xod

I get a CORS error in browser console as "CORS not enabled or no matching rule found for this request."

I found the URL https://www.pdftron.com/webviewer/demo/tutorials/xdomain.html to enable CORS. What URL should I provide in proxy.html file as every XOD blob stored in Azure BLOB storage would have a differenert URL.

The portion https://somename.blob.core.windows.net/containername/ would be same but the filename would be different for dirrerent XOD's. So, how can I pass the XOD filename in the proxy.html file?

Is this the correct way to handle the CORS issue https://www.pdftron.com/webviewer/demo/tutorials/xdomain.html or is there another simpler way?

    @model XODViewer.DataModel.Document

    @{
        ViewBag.Title = "Document";
    }

    @Scripts.Render("~/bundles/jquery")
    <script src="~/lib/WebViewer.min.js"></script>

    <style>
        #viewer {
            width: 1024px;
            height: 600px;
        }
    </style>

    <script>
        $(function () {
                var viewerElement = document.getElementById('viewer');
                var myWebViewer = new PDFTron.WebViewer({
                    path: 'lib',
                    type: 'html5',
                    documentType: "xod",
 initialDoc:"https://somename.blob.core.windows.net/containername/GettingsStarted.xod",
                    config: '../../lib/WebViewerConfig.js',
                    streaming: true,
                    enableAnnotations: false,
                    enableOfflineMode: false,
                    enableReadOnlyMode: true,
                    azureWorkaround: true
                }, viewerElement);
            });
    </script>

    <div id="viewer"class="xod-viewer-div">
    </div>

Bruce Chen Bruce Chen · Accepted Answer · 2017-03-07T02:55:25

According to your description, I followed this tutorial to get started with WebViewer. I could encounter the same error as you mentioned as follows:

<script>
    $(function() {
        var viewerElement = document.getElementById("viewer");
        var myWebViewer = new PDFTron.WebViewer({
            path: "/libs",
            type: "html5",
            documentType:'xod',
            initialDoc:"https://brucechen.blob.core.windows.net/docs/GettingStarted.xod"
        }, viewerElement);
    });
</script>

For cross domain accessing, you could leverage Microsoft Azure Storage Explorer to configure CORS Setting as follows:

Result

PDFTron WebViewer - CORS error on trying to display XOD file stored in Azure BLOB storage

1 Answers