{"id":3634,"date":"2022-06-25T08:53:07","date_gmt":"2022-06-25T00:53:07","guid":{"rendered":"https:\/\/pdfjs.libertynlp.com\/?p=3634"},"modified":"2022-06-25T10:29:11","modified_gmt":"2022-06-25T02:29:11","slug":"how-to-load-file-from-url-using-pdf-js-bypassing-browser-cors","status":"publish","type":"post","link":"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-load-file-from-url-using-pdf-js-bypassing-browser-cors\/","title":{"rendered":"How to load file from URL using PDF.js bypassing browser CORS?"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3634\" class=\"elementor elementor-3634\" data-elementor-settings=\"[]\">\n\t\t\t\t\t\t\t<div class=\"elementor-section-wrap\">\n\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b45288e elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"b45288e\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b0a15af\" data-id=\"b0a15af\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2024868 elementor-widget elementor-widget-text-editor\" data-id=\"2024868\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.5.5 - 03-02-2022 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#818a91;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#818a91;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p style=\"text-align: left;\">The previous post has introduced how to disable the CORS (Cross-Origin Resource Sharing) of PDF.js, but PDF.js still cannot load the file from the URL, this is because the double CORS block of PDF.js and the browser. This post will figure out: <em><strong>\u2460 How to bypass the browser CORS to load file with URL? \u2461 How to load URL file using PDF.js?<\/strong><\/em><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-221f406 elementor-widget elementor-widget-text-editor\" data-id=\"221f406\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><em><strong>Keywords:<\/strong><\/em> browser , CORS , website , PDF.js ,\u00a0 load file from url.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-cbaf05a elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"cbaf05a\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-210b226\" data-id=\"210b226\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-348f46d elementor-widget elementor-widget-heading\" data-id=\"348f46d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.5.5 - 03-02-2022 *\/\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}<\/style><h2 class=\"elementor-heading-title elementor-size-default\">Browser CORS<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-0f5a760 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"0f5a760\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8f2fe5b\" data-id=\"8f2fe5b\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5248d9f elementor-widget elementor-widget-text-editor\" data-id=\"5248d9f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>After we disabled the CORS verification code in viewer.js, we will find that PDF.js still cannot load the URL file correctly, and the <em><strong><span style=\"color: #3366ff;\">error message<\/span><\/strong><\/em> becomes: <span style=\"color: #3366ff;\"><em><strong>&#8220;Message: Failed to fetch&#8221;<\/strong><\/em><\/span>, which means that our URL file restricted. It is also possible that the address of the document is wrong.<\/p><p>The error reported here is due to the block of the browser CORS. At this time, when you open the browser DevTools <em><strong><span style=\"color: #3366ff;\">(F12 or Fn+F12)<\/span><\/strong><\/em>, you can see the <em><strong><span style=\"color: #3366ff;\">error message<\/span> <\/strong><\/em>in the console : <em><strong><span style=\"color: #3366ff;\">Access to XMLHttpRequest at &#8216;file:\/\/\/C:\/Programmer\/pdfjs-2.4.456-dist\/web\/locale\/locale.properties&#8217; from origin &#8216;null&#8217; has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.<\/span><\/strong><\/em><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-64065cd elementor-widget elementor-widget-image\" data-id=\"64065cd\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.5.5 - 03-02-2022 *\/\n.elementor-widget-image{text-align:center}.elementor-widget-image a{display:inline-block}.elementor-widget-image a img[src$=\".svg\"]{width:48px}.elementor-widget-image img{vertical-align:middle;display:inline-block}<\/style>\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"2696\" height=\"406\" src=\"https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/\u8de8\u57df4.png\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/\u8de8\u57df4.png 2696w, https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/\u8de8\u57df4-300x45.png 300w, https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/\u8de8\u57df4-1024x154.png 1024w, https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/\u8de8\u57df4-768x116.png 768w, https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/\u8de8\u57df4-1536x231.png 1536w, https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/\u8de8\u57df4-2048x308.png 2048w\" sizes=\"auto, (max-width: 2696px) 100vw, 2696px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8b041ef elementor-widget elementor-widget-heading\" data-id=\"8b041ef\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">error message<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-0fb8916 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"0fb8916\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b2ba0a5\" data-id=\"b2ba0a5\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2ba0732 elementor-widget elementor-widget-heading\" data-id=\"2ba0732\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Bypass browser CORS<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5192ff5 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"5192ff5\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-fa8ae57\" data-id=\"fa8ae57\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6250ab9 elementor-widget elementor-widget-text-editor\" data-id=\"6250ab9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Point to the problem of block browser CORS in loading URL file, on solution is that the server converting PDF file into a stream and render it to <strong><span style=\"color: #ff9900;\">PDF.js<\/span><\/strong>, but we will not discuss such a strategy here, we care how to solve this problem only in the website. To solve this problem needs the following steps. The following files<em><strong><span style=\"color: #3366ff;\"> viewer.js, <\/span><\/strong><\/em><em><strong><span style=\"color: #3366ff;\">viewer.html <\/span><\/strong><\/em><span style=\"color: #3366ff;\"><span style=\"color: #000000;\">and <\/span><\/span><em><strong><span style=\"color: #3366ff;\">test.html<\/span><\/strong><\/em> are in <em><strong><span style=\"color: #3366ff;\">pdfjs-2.4.456-dist\\web<\/span><\/strong><strong><span style=\"color: #3366ff;\">.<\/span><\/strong><\/em><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c049cb6 elementor-widget elementor-widget-heading\" data-id=\"c049cb6\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Modify viewer.js<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c5bf820 elementor-widget elementor-widget-text-editor\" data-id=\"c5bf820\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Disable the following code in <span style=\"color: #3366ff;\"><em><strong>viewer.j<\/strong><span style=\"color: #3366ff;\"><strong>s,<\/strong><\/span><\/em><\/span> then override the functions for loading PDF file \u00a0named <em><strong><span style=\"color: #3366ff;\">webViewerLoad<\/span> <\/strong><\/em>and<em><strong><span style=\"color: #3366ff;\"> Run.<\/span><\/strong><\/em><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1df5693 elementor-widget elementor-widget-heading\" data-id=\"1df5693\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">inactivate code<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d7d6b3a elementor-widget elementor-widget-heading\" data-id=\"d7d6b3a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">rewrite webViewerLoad<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f0d19c8 elementor-widget elementor-widget-heading\" data-id=\"f0d19c8\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Modify viewer.html <\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8a00144 elementor-widget elementor-widget-text-editor\" data-id=\"8a00144\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Add a function in <em><strong><span style=\"color: #3366ff;\">viewer.html<\/span><\/strong><\/em> to call the modified <em><strong><span style=\"color: #3366ff;\">webViewerLoad<\/span> <\/strong><\/em>function when <em><strong><span style=\"color: #3366ff;\">viewer.html<\/span><\/strong><\/em> onloading.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-aabb5c0 elementor-widget elementor-widget-heading\" data-id=\"aabb5c0\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">add webViewerLoad<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6df5c01 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"6df5c01\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-444bcfe\" data-id=\"444bcfe\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ecef138 elementor-widget elementor-widget-heading\" data-id=\"ecef138\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Dynamically load PDF<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d62d0b2 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"d62d0b2\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-79ca3c9\" data-id=\"79ca3c9\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-663ff79 elementor-widget elementor-widget-text-editor\" data-id=\"663ff79\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Modify the function in <em><strong><span style=\"color: #3366ff;\">viewer.html<\/span><\/strong><\/em> to load the file according to the PDF url parameter carried in the <em><strong><span style=\"color: #3366ff;\">&lt;iframe&gt;<\/span><\/strong><\/em>\u00a0<span style=\"color: #3366ff;\"><em><strong>src.<\/strong><\/em><\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2cc2447 elementor-widget elementor-widget-heading\" data-id=\"2cc2447\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">modify viewer.html onload<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f4fecc3 elementor-widget elementor-widget-text-editor\" data-id=\"f4fecc3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>When using<em><strong><span style=\"color: #3366ff;\"> &lt;iframe&gt;<\/span><\/strong><\/em>\u00a0in <em><strong><span style=\"color: #3366ff;\">test.html<\/span><\/strong><\/em> to refer to the <em><strong><span style=\"color: #3366ff;\">viewer.html<\/span> <\/strong><\/em>of <strong><span style=\"color: #ff9900;\">PDF.js<\/span><\/strong>, you only need to modify the PDF URL after <strong><span style=\"color: #3366ff;\"><em>src=&#8221;viewer.html?file=&#8221;<\/em>.<\/span><\/strong> That is, changing the <em><strong><span style=\"color: #3366ff;\">src<\/span><\/strong><\/em> attribute of <span style=\"color: #3366ff;\"><em><strong>&lt;iframe&gt;<\/strong><\/em><\/span> to realize dynamic loading of PDF file.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3a431c0 elementor-widget elementor-widget-heading\" data-id=\"3a431c0\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">complete test.html<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ef662d7 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"ef662d7\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-888e02f\" data-id=\"888e02f\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9086cfe elementor-widget elementor-widget-heading\" data-id=\"9086cfe\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Summarize<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-30e7758 elementor-widget elementor-widget-text-editor\" data-id=\"30e7758\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><strong><span style=\"color: #ff9900;\">PDF.js<\/span><\/strong> cannot open files by URL, which limits our usage, so we have to override some functions. The main changes are as follows:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-598379d elementor-widget elementor-widget-text-editor\" data-id=\"598379d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>This post introduces how to load PDF files from URLs in <strong><span style=\"color: #ff9900;\">PDF.js.<\/span> <\/strong>If you want to know how to use <strong><span style=\"color: #ff9900;\">PDF.js<\/span><\/strong> to get the contents of PDF files and manipulate pdf file with code, please view the related post.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b9bd16d elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"b9bd16d\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5cf42e4\" data-id=\"5cf42e4\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4f47575 elementor-widget elementor-widget-heading\" data-id=\"4f47575\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Related articles<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>The previous post has introduced how to disable the CORS (Cross-Origin Resource Sharing) of PDF.js, but PDF.js still cannot load the file from the URL, this is because the double CORS block of PDF.js and the browser. <\/p>\n","protected":false},"author":1,"featured_media":3853,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3634","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to load file from URL using PDF.js bypassing browser CORS? - pdf.js annotation library for everyone!<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-load-file-from-url-using-pdf-js-bypassing-browser-cors\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to load file from URL using PDF.js bypassing browser CORS? - pdf.js annotation library for everyone!\" \/>\n<meta property=\"og:description\" content=\"The previous post has introduced how to disable the CORS (Cross-Origin Resource Sharing) of PDF.js, but PDF.js still cannot load the file from the URL, this is because the double CORS block of PDF.js and the browser.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-load-file-from-url-using-pdf-js-bypassing-browser-cors\/\" \/>\n<meta property=\"og:site_name\" content=\"pdf.js annotation library for everyone!\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=100083516062282\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/profile.php?id=100083516062282\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-25T00:53:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-06-25T02:29:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/POST6.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1123\" \/>\n\t<meta property=\"og:image:height\" content=\"1123\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Chaoxu Wei\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Chaoxu Wei\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/pdfjs.libertynlp.com\/#website\",\"url\":\"https:\/\/pdfjs.libertynlp.com\/\",\"name\":\"pdf.js annotation library for everyone!\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/6bac77d073615c351c81d1443558c032\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/pdfjs.libertynlp.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-load-file-from-url-using-pdf-js-bypassing-browser-cors\/\",\"url\":\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-load-file-from-url-using-pdf-js-bypassing-browser-cors\/\",\"name\":\"How to load file from URL using PDF.js bypassing browser CORS? - pdf.js annotation library for everyone!\",\"isPartOf\":{\"@id\":\"https:\/\/pdfjs.libertynlp.com\/#website\"},\"datePublished\":\"2022-06-25T00:53:07+00:00\",\"dateModified\":\"2022-06-25T02:29:11+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-load-file-from-url-using-pdf-js-bypassing-browser-cors\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-load-file-from-url-using-pdf-js-bypassing-browser-cors\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-load-file-from-url-using-pdf-js-bypassing-browser-cors\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/pdfjs.libertynlp.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to load file from URL using PDF.js bypassing browser CORS?\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-load-file-from-url-using-pdf-js-bypassing-browser-cors\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-load-file-from-url-using-pdf-js-bypassing-browser-cors\/\"},\"author\":{\"name\":\"Chaoxu Wei\",\"@id\":\"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/6bac77d073615c351c81d1443558c032\"},\"headline\":\"How to load file from URL using PDF.js bypassing browser CORS?\",\"datePublished\":\"2022-06-25T00:53:07+00:00\",\"dateModified\":\"2022-06-25T02:29:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-load-file-from-url-using-pdf-js-bypassing-browser-cors\/\"},\"wordCount\":490,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/6bac77d073615c351c81d1443558c032\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-load-file-from-url-using-pdf-js-bypassing-browser-cors\/#respond\"]}]},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/6bac77d073615c351c81d1443558c032\",\"name\":\"Chaoxu Wei\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/mmexport1593955346163-1-scaled-e1654163212877.jpg\",\"contentUrl\":\"https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/mmexport1593955346163-1-scaled-e1654163212877.jpg\",\"width\":2297,\"height\":2297,\"caption\":\"Chaoxu Wei\"},\"logo\":{\"@id\":\"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/image\/\"},\"description\":\"Job hunting, both part-time and full-time jobs are accepted. Job recommendation please email me weichaoxu1998@gmail.com, thank you very much!\",\"sameAs\":[\"https:\/\/pdfjs.libertynlp.com\",\"https:\/\/www.facebook.com\/profile.php?id=100083516062282\",\"https:\/\/www.youtube.com\/channel\/UC1-am0MOM52n2HVeoLlWWxA\"],\"url\":\"https:\/\/pdfjs.libertynlp.com\/index.php\/author\/weichaoxu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to load file from URL using PDF.js bypassing browser CORS? - pdf.js annotation library for everyone!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-load-file-from-url-using-pdf-js-bypassing-browser-cors\/","og_locale":"en_US","og_type":"article","og_title":"How to load file from URL using PDF.js bypassing browser CORS? - pdf.js annotation library for everyone!","og_description":"The previous post has introduced how to disable the CORS (Cross-Origin Resource Sharing) of PDF.js, but PDF.js still cannot load the file from the URL, this is because the double CORS block of PDF.js and the browser.","og_url":"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-load-file-from-url-using-pdf-js-bypassing-browser-cors\/","og_site_name":"pdf.js annotation library for everyone!","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=100083516062282","article_author":"https:\/\/www.facebook.com\/profile.php?id=100083516062282","article_published_time":"2022-06-25T00:53:07+00:00","article_modified_time":"2022-06-25T02:29:11+00:00","og_image":[{"width":1123,"height":1123,"url":"https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/POST6.jpg","type":"image\/jpeg"}],"author":"Chaoxu Wei","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Chaoxu Wei","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/pdfjs.libertynlp.com\/#website","url":"https:\/\/pdfjs.libertynlp.com\/","name":"pdf.js annotation library for everyone!","description":"","publisher":{"@id":"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/6bac77d073615c351c81d1443558c032"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pdfjs.libertynlp.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-load-file-from-url-using-pdf-js-bypassing-browser-cors\/","url":"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-load-file-from-url-using-pdf-js-bypassing-browser-cors\/","name":"How to load file from URL using PDF.js bypassing browser CORS? - pdf.js annotation library for everyone!","isPartOf":{"@id":"https:\/\/pdfjs.libertynlp.com\/#website"},"datePublished":"2022-06-25T00:53:07+00:00","dateModified":"2022-06-25T02:29:11+00:00","breadcrumb":{"@id":"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-load-file-from-url-using-pdf-js-bypassing-browser-cors\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-load-file-from-url-using-pdf-js-bypassing-browser-cors\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-load-file-from-url-using-pdf-js-bypassing-browser-cors\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/pdfjs.libertynlp.com\/"},{"@type":"ListItem","position":2,"name":"How to load file from URL using PDF.js bypassing browser CORS?"}]},{"@type":"Article","@id":"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-load-file-from-url-using-pdf-js-bypassing-browser-cors\/#article","isPartOf":{"@id":"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-load-file-from-url-using-pdf-js-bypassing-browser-cors\/"},"author":{"name":"Chaoxu Wei","@id":"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/6bac77d073615c351c81d1443558c032"},"headline":"How to load file from URL using PDF.js bypassing browser CORS?","datePublished":"2022-06-25T00:53:07+00:00","dateModified":"2022-06-25T02:29:11+00:00","mainEntityOfPage":{"@id":"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-load-file-from-url-using-pdf-js-bypassing-browser-cors\/"},"wordCount":490,"commentCount":0,"publisher":{"@id":"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/6bac77d073615c351c81d1443558c032"},"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-load-file-from-url-using-pdf-js-bypassing-browser-cors\/#respond"]}]},{"@type":["Person","Organization"],"@id":"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/6bac77d073615c351c81d1443558c032","name":"Chaoxu Wei","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/image\/","url":"https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/mmexport1593955346163-1-scaled-e1654163212877.jpg","contentUrl":"https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/mmexport1593955346163-1-scaled-e1654163212877.jpg","width":2297,"height":2297,"caption":"Chaoxu Wei"},"logo":{"@id":"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/image\/"},"description":"Job hunting, both part-time and full-time jobs are accepted. Job recommendation please email me weichaoxu1998@gmail.com, thank you very much!","sameAs":["https:\/\/pdfjs.libertynlp.com","https:\/\/www.facebook.com\/profile.php?id=100083516062282","https:\/\/www.youtube.com\/channel\/UC1-am0MOM52n2HVeoLlWWxA"],"url":"https:\/\/pdfjs.libertynlp.com\/index.php\/author\/weichaoxu\/"}]}},"_links":{"self":[{"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/posts\/3634","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/comments?post=3634"}],"version-history":[{"count":215,"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/posts\/3634\/revisions"}],"predecessor-version":[{"id":3854,"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/posts\/3634\/revisions\/3854"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/media\/3853"}],"wp:attachment":[{"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/media?parent=3634"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/categories?post=3634"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/tags?post=3634"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}