我有一个用 asp.net mvc 制作的网站,其中我必须有一个 pdf 查看器,我选择选择Mozilla一个,但是在查看 pdf 时出现以下错误:
从源“ http://localhost:57130 ”访问“file:///C:Ruta/pdf/pdf_example4.pdf”的XMLHttpRequest已被 CORS 策略阻止:跨源请求仅支持协议方案:http,数据,铬,铬扩展,https。
我看过这个解决方案,但它似乎对你的问题非常具体,将东西添加到我没有的类中。
我用来调用pdf的代码是:
function cargarPdf(ruta) {
// If absolute URL from the remote server is provided, configure the CORS
// header on that server.
var url = ruta;
// Loaded via <script> tag, create shortcut to access PDF.js exports.
var pdfjsLib = window['pdfjs-dist/build/pdf'];
//console.log(pdfjsLib);
// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = '../Public/js/PDFJS/pdf.worker.js';
var pdfDoc = null,
pageNum = 1,
pageRendering = false,
pageNumPending = null,
scale = 0.65,
canvas = document.getElementById('the-canvas'),
ctx = canvas.getContext('2d');
/**
* Get page info from document, resize canvas accordingly, and render page.
* param num Page number.
*/
function renderPage(num) {
pageRendering = true;
// Using promise to fetch the page
pdfDoc.getPage(num).then(function (page) {
var viewport = page.getViewport({ scale: scale });
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
var renderTask = page.render(renderContext);
// Wait for rendering to finish
renderTask.promise.then(function () {
pageRendering = false;
if (pageNumPending !== null) {
// New page rendering is pending
renderPage(pageNumPending);
pageNumPending = null;
}
});
});
// Update page counters
document.getElementById('page_num').textContent = num;
}
/**
* If another page rendering in progress, waits until the rendering is
* finised. Otherwise, executes rendering immediately.
*/
function queueRenderPage(num) {
if (pageRendering) {
pageNumPending = num;
} else {
renderPage(num);
}
}
/**
* Displays previous page.
*/
function onPrevPage() {
if (pageNum <= 1) {
return;
}
pageNum--;
queueRenderPage(pageNum);
}
document.getElementById('prev').addEventListener('click', onPrevPage);
/**
* Displays next page.
*/
function onNextPage() {
if (pageNum >= pdfDoc.numPages) {
return;
}
pageNum++;
queueRenderPage(pageNum);
}
document.getElementById('next').addEventListener('click', onNextPage);
/**
* Asynchronously downloads PDF.
*/
pdfjsLib.getDocument(url).promise.then(function (pdfDoc_) {
pdfDoc = pdfDoc_;
document.getElementById('page_count').textContent = pdfDoc.numPages;
// Initial/first page rendering
renderPage(pageNum);
});
}
执行此代码时出现两个错误:
错误 1 pdf.js:23842 Uncaught TypeError: Cannot read property 'xhr' of undefined at NetworkManager.getRequestXhr (pdf.js:23842) at PDFNetworkStreamFullRequestReader._onHeadersReceived (pdf.js:23969) at NetworkManager.onStateChange (pdf.js:23779) ) 在 NetworkManager.request (pdf.js:23751) 在 NetworkManager.requestFull (pdf.js:23707) 在新 PDFNetworkStreamFullRequestReader (pdf.js:23944) 在 PDFNetworkStream.getFullReader (pdf.js:23897) 在 WorkerTransport。(pdf.js:11495) at _callee$ (pdf.js:16870) at tryCatch (pdf.js:12428)
错误 2: pdf.js:24035 Uncaught TypeError: Cannot read property 'reject' of undefined at PDFNetworkStreamFullRequestReader._onError (pdf.js:24035) at XMLHttpRequest.xhr.onerror (pdf.js:23741) at NetworkManager.request (pdf. js:23751) 在 NetworkManager.requestFull (pdf.js:23707) 在新 PDFNetworkStreamFullRequestReader (pdf.js:23944) 在 PDFNetworkStream.getFullReader (pdf.js:23897) 在 WorkerTransport。(pdf.js:11495) at _callee$ (pdf.js:16870) at tryCatch (pdf.js:12428) at Generator.invoke [as _invoke] (pdf.js:12603)
如果我使用从网络编写的路径将字符串作为参数传递给 loadPdf 函数,它会显示 pdf,但是从数据库中收集路径时,会弹出错误。
原则上,同源策略管理,简而言之,默认情况下,不同源之间不能共享资源。该政策自 1995 年左右开始生效。跨域资源共享
(CORS) 政策诞生于 2004 年左右 ,旨在能够在不同来源之间安全地共享资源。
执行
XMLHttpRequest
(ajax)file://
违反了这两种策略,即使localhost
它们file
是同一台机器,但可以理解它们是不同的来源。源被理解为方案 + 主机 + 端口组合,rfc6454。让我们想象一下这种情况:
passwords.txt
在其桌面上的文件中。file://usuarioA/escritorio/passwords.txt
然后另一个 ajax 将内容发送到他的服务器。为了能够通过 XMLHttpRequest 访问 pdf 或任何其他资源,您必须考虑到这一点:
它们必须位于同一来源(方案 + 主机 + 端口),例外情况
http
是需要资源,https
但反之则不然。查看混合内容或...如果它们位于不同的来源,则 CORS 变得相关,其中只允许 GET、HEAD 和 POST,并且方案
http
和https
(有例外),此外,服务器必须响应Access-Control-Allow-Origin标头明确接受服务器提出请求。错误信息:
近似翻译:
也就是说,从一个以 开头的 URL
http:
(这很常见),您正在尝试访问其 URL 以 开头的资源,该资源file:
不在允许的方案列表中。实际上问题比这更严重:您尝试访问的 PDF 文件是在客户端设备上搜索的,而不是在服务器上。只有当服务器和客户端始终是同一台机器时,它才会起作用。您必须通过 HTTP(S) 从 Web 服务器提供 PDF 文件。