PDFTron WebViewer - 尝试显示存储在 Azure BLOB 存储中的 XOD 文件时出现 CORS 错误

Question

我正在使用 WebViewer 2.2.2 并尝试在 ASP.NET MVC 5 视图上显示存储在 Azure Blob 存储中的 XOD 文件，url 为：https://somename.blob.core.windows.net/containername/GettingsStarted.xod

我在浏览器控制台中收到 CORS 错误，显示为“CORS 未启用或未找到此请求的匹配规则。”

我发现 URL https://www.pdftron.com/webviewer/demo/tutorials/xdomain.html 可以启用 CORS。我应该在 proxy.html 文件中提供什么 URL，因为存储在 Azure BLOB 存储中的每个 XOD blob 都会有一个不同的 URL。

https://somename.blob.core.windows.net/containername/ 部分相同，但不同 XOD 的文件名不同。那么，如何在 proxy.html 文件中传递 XOD 文件名？

这是处理 CORS 问题的正确方法https://www.pdftron.com/webviewer/demo/tutorials/xdomain.html还是有其他更简单的方法？

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

Answer 1

根据您的描述，我按照tutorial开始使用WebViewer。我可能会遇到与您提到的相同的错误，如下所示：

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

对于跨域访问，您可以利用 Microsoft Azure Storage Explorer 配置 CORS 设置，如下所示：

结果

PDFTron WebViewer - 尝试显示存储在 Azure BLOB 存储中的 XOD 文件时出现 CORS 错误

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

asp.net-mvc

azure

pdftron

azure-blob-storage