{"id":3500,"date":"2022-06-25T00:07:27","date_gmt":"2022-06-24T16:07:27","guid":{"rendered":"https:\/\/pdfjs.libertynlp.com\/?p=3500"},"modified":"2022-06-25T08:43:31","modified_gmt":"2022-06-25T00:43:31","slug":"how-to-use-pdf-js-to-load-file-from-url-and-figure-out-cors-block","status":"publish","type":"post","link":"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-use-pdf-js-to-load-file-from-url-and-figure-out-cors-block\/","title":{"rendered":"How to use PDF.js to load file from URL and figure out CORS block?"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3500\" class=\"elementor elementor-3500\" 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-91ba34c 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=\"91ba34c\" 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-92260e0\" data-id=\"92260e0\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\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-af4bacc 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=\"af4bacc\" 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-6d22f3f\" data-id=\"6d22f3f\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\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-721f55d 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=\"721f55d\" 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-34d0fdd\" data-id=\"34d0fdd\" 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-df75b14 elementor-widget elementor-widget-text-editor\" data-id=\"df75b14\" 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 posts introduced why you should choose PDF.js and how to import PDF.js into your own project. Through the previous steps, we can open local file in PDF.js, but when we want to load file from URL, it will be failed because of\u00a0 blocking the CORS(Cross-Origin Resource Sharing). Through this post, you will learn: <em><strong>\u2460 How to modify the default file opened by PDF.js? \u2461 How to modify PDF.js so that it can load file from URL? \u2462 How to figure out the CORS block problem for load file from URL?<\/strong><\/em><\/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-0b1e624 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=\"0b1e624\" 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-345f1b0\" data-id=\"345f1b0\" 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-602181d elementor-widget elementor-widget-text-editor\" data-id=\"602181d\" 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> PDF.js , CORS , CORS block , 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-83a3cc5 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=\"83a3cc5\" 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-492cd43\" data-id=\"492cd43\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\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-1051c86 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=\"1051c86\" 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-2b09e38\" data-id=\"2b09e38\" 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-617c199 elementor-widget elementor-widget-heading\" data-id=\"617c199\" 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\">Default file<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3c97e04 elementor-widget elementor-widget-text-editor\" data-id=\"3c97e04\" 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>The <strong><span style=\"color: #ff9900;\">PDF.js<\/span><\/strong> I used in this post is the release version of <em><strong><span style=\"color: #3366ff;\">pdfjs-2.4.456-dist.<\/span> <\/strong><\/em>To ensure that your experiments have the same effect as mine, it is recommended to choose the same version. If you don&#8217;t have this version of the file, you can email me to get it <em><strong><span style=\"color: #3366ff;\">(libertynlp@163.com).<\/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-58a6aa3 elementor-widget elementor-widget-heading\" data-id=\"58a6aa3\" 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\">Folder structure<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4e94b06 elementor-widget elementor-widget-text-editor\" data-id=\"4e94b06\" 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>Every time you open <strong><span style=\"color: #ff9900;\">PDF.js<\/span><\/strong>, the file named <em><strong><span style=\"color: #3366ff;\">compressed.tracemonkey-pldi-09.pdf<\/span><\/strong><\/em> in <em><strong><span style=\"color: #3366ff;\">pdfjs-2.4.456-dist\/web<\/span><\/strong><\/em>\u00a0is loaded by default. So, how can we change the files that are loaded by default? Before solving this problem, let&#8217;s review the directory structure of <em><strong><span style=\"color: #3366ff;\">pdfjs-2.4.456-dist<\/span><\/strong><\/em> to make the following description clearer. The figure below only shows the files that will be modified in this blog.<\/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-14dae27 elementor-widget elementor-widget-image\" data-id=\"14dae27\" 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=\"1482\" height=\"620\" src=\"https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/\u76ee\u5f55\u7ed3\u6784.png\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/\u76ee\u5f55\u7ed3\u6784.png 1482w, https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/\u76ee\u5f55\u7ed3\u6784-300x126.png 300w, https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/\u76ee\u5f55\u7ed3\u6784-1024x428.png 1024w, https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/\u76ee\u5f55\u7ed3\u6784-768x321.png 768w\" sizes=\"auto, (max-width: 1482px) 100vw, 1482px\" \/>\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-005ef03 elementor-widget elementor-widget-heading\" data-id=\"005ef03\" 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\">pdfjs-2.4.456-dist<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a1a157b elementor-widget elementor-widget-heading\" data-id=\"a1a157b\" 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 defalult<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8271125 elementor-widget elementor-widget-text-editor\" data-id=\"8271125\" 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>To modify the file opened by default in <strong><span style=\"color: #ff9900;\">PDF.js<\/span><\/strong>, you need to search in <em><strong><span style=\"color: #3366ff;\">web\\viewer.js<\/span><\/strong><\/em> and modify the value of the <em><strong><span style=\"color: #3366ff;\">defaultUrl<\/span> <\/strong><\/em>parameter, change <em><strong><span style=\"color: #3366ff;\">defaultUrl<\/span> <\/strong><\/em>to the file you want to open by default, but if you change it to load the file from the URL, it is possible be failed and the next section will give you specific solutions. At least, we can specify any local file as the default open file now.<\/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-e607a13 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=\"e607a13\" 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-61b8d77\" data-id=\"61b8d77\" 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-61ae09c elementor-widget elementor-widget-heading\" data-id=\"61ae09c\" 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\">Load URL file<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-996f113 elementor-widget elementor-widget-text-editor\" data-id=\"996f113\" 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 we want to load a document from a URL, it will be interrupted by encountering CORS block, and it will be <strong><span style=\"color: #ff9900;\">PDF.js<\/span><\/strong> and browsers (such as Chrome) two-stage CORS block that cause loading file failure.<\/p><p>Considering that this post should not be too long, the left content will only give a solution for the CORS block caused by of <strong><span style=\"color: #ff9900;\">PDF.js<\/span><\/strong> itself, and the solution for the browser is placed into another POST, please see related articles to see it.<\/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-5820db4 elementor-widget elementor-widget-heading\" data-id=\"5820db4\" 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\">PDF.js CORS block<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7836317 elementor-widget elementor-widget-text-editor\" data-id=\"7836317\" 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 I changed the defaultUrl to the following value, PDF.js returned me an <em><strong><span style=\"color: #3366ff;\">error :<\/span><\/strong><\/em> <span style=\"color: #3366ff;\"><strong><em>&#8220;Message: file origin does not match viewer&#8217;s&#8221;<\/em><\/strong><\/span>, which means that the pdf file we are using triggers the CORS block of PDF.js.<\/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-c8f191d elementor-widget elementor-widget-image\" data-id=\"c8f191d\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1375\" height=\"324\" src=\"https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/\u8de8\u57df1.png\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/\u8de8\u57df1.png 1375w, https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/\u8de8\u57df1-300x71.png 300w, https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/\u8de8\u57df1-1024x241.png 1024w, https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/\u8de8\u57df1-768x181.png 768w\" sizes=\"auto, (max-width: 1375px) 100vw, 1375px\" \/>\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-a8d2063 elementor-widget elementor-widget-heading\" data-id=\"a8d2063\" 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\">PDF.js error<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-34c4c4a elementor-widget elementor-widget-heading\" data-id=\"34c4c4a\" 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 PDF.js CORS<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b386ae5 elementor-widget elementor-widget-text-editor\" data-id=\"b386ae5\" 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>CORS guarantees the security of our application to the greatest extent, but it also limits our usage. To avoid being affected by <strong><span style=\"color: #ff9900;\">PDF.js<\/span><\/strong> CORS, you need to inactivate the following code in the <em><strong><span style=\"color: #3366ff;\">viewer.js<\/span><\/strong><\/em>, that is, make it invalid.<\/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-a1bcb4a 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=\"a1bcb4a\" 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-7031ba8\" data-id=\"7031ba8\" 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-a591aee elementor-widget elementor-widget-heading\" data-id=\"a591aee\" 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\"><span style=\"font-size: 1.5rem; white-space: normal; word-spacing: 2px;\">Summarize<\/span><\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-87b42ca elementor-widget elementor-widget-text-editor\" data-id=\"87b42ca\" 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>The file cannot be loaded from URL in <strong><span style=\"color: #ff9900;\">PDF.js.<\/span><\/strong> This is because the double CORS of <strong><span style=\"color: #ff9900;\">PDF.js<\/span><\/strong> and the browser restricts us. This POST introduces how to release the CORS of PDF.js. As for how to release the CORS of the browser, please read the related article.<\/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-31f8d20 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=\"31f8d20\" 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-4cded2b\" data-id=\"4cded2b\" 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-abc485a elementor-widget elementor-widget-heading\" data-id=\"abc485a\" 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\"><span style=\"font-size: 1.5rem; white-space: normal; word-spacing: 2px;\">Related articles<\/span><\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-51db6e4 elementor-widget elementor-widget-heading\" data-id=\"51db6e4\" 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\">Coming soon<\/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-dd7a872 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=\"dd7a872\" 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-a23130a\" data-id=\"a23130a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\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-c2913a8 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=\"c2913a8\" 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-3445af9\" data-id=\"3445af9\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\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-45a6563 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=\"45a6563\" 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-a4ab803\" data-id=\"a4ab803\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\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>Through the previous steps, we can open local file in PDF.js, but when we want to load file from URL, it will be failed because of\u00a0 blocking the CORS(Cross-Origin Resource Sharing). <\/p>\n","protected":false},"author":1,"featured_media":3614,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3500","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 use PDF.js to load file from URL and figure out CORS block? - 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-use-pdf-js-to-load-file-from-url-and-figure-out-cors-block\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to use PDF.js to load file from URL and figure out CORS block? - pdf.js annotation library for everyone!\" \/>\n<meta property=\"og:description\" content=\"Through the previous steps, we can open local file in PDF.js, but when we want to load file from URL, it will be failed because of\u00a0 blocking the CORS(Cross-Origin Resource Sharing).\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-use-pdf-js-to-load-file-from-url-and-figure-out-cors-block\/\" \/>\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-24T16:07:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-06-25T00:43:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/POST5.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-use-pdf-js-to-load-file-from-url-and-figure-out-cors-block\/\",\"url\":\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-use-pdf-js-to-load-file-from-url-and-figure-out-cors-block\/\",\"name\":\"How to use PDF.js to load file from URL and figure out CORS block? - pdf.js annotation library for everyone!\",\"isPartOf\":{\"@id\":\"https:\/\/pdfjs.libertynlp.com\/#website\"},\"datePublished\":\"2022-06-24T16:07:27+00:00\",\"dateModified\":\"2022-06-25T00:43:31+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-use-pdf-js-to-load-file-from-url-and-figure-out-cors-block\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-use-pdf-js-to-load-file-from-url-and-figure-out-cors-block\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-use-pdf-js-to-load-file-from-url-and-figure-out-cors-block\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/pdfjs.libertynlp.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to use PDF.js to load file from URL and figure out CORS block?\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-use-pdf-js-to-load-file-from-url-and-figure-out-cors-block\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-use-pdf-js-to-load-file-from-url-and-figure-out-cors-block\/\"},\"author\":{\"name\":\"Chaoxu Wei\",\"@id\":\"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/6bac77d073615c351c81d1443558c032\"},\"headline\":\"How to use PDF.js to load file from URL and figure out CORS block?\",\"datePublished\":\"2022-06-24T16:07:27+00:00\",\"dateModified\":\"2022-06-25T00:43:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-use-pdf-js-to-load-file-from-url-and-figure-out-cors-block\/\"},\"wordCount\":571,\"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-use-pdf-js-to-load-file-from-url-and-figure-out-cors-block\/#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 use PDF.js to load file from URL and figure out CORS block? - 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-use-pdf-js-to-load-file-from-url-and-figure-out-cors-block\/","og_locale":"en_US","og_type":"article","og_title":"How to use PDF.js to load file from URL and figure out CORS block? - pdf.js annotation library for everyone!","og_description":"Through the previous steps, we can open local file in PDF.js, but when we want to load file from URL, it will be failed because of\u00a0 blocking the CORS(Cross-Origin Resource Sharing).","og_url":"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-use-pdf-js-to-load-file-from-url-and-figure-out-cors-block\/","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-24T16:07:27+00:00","article_modified_time":"2022-06-25T00:43:31+00:00","og_image":[{"width":1123,"height":1123,"url":"https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/POST5.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-use-pdf-js-to-load-file-from-url-and-figure-out-cors-block\/","url":"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-use-pdf-js-to-load-file-from-url-and-figure-out-cors-block\/","name":"How to use PDF.js to load file from URL and figure out CORS block? - pdf.js annotation library for everyone!","isPartOf":{"@id":"https:\/\/pdfjs.libertynlp.com\/#website"},"datePublished":"2022-06-24T16:07:27+00:00","dateModified":"2022-06-25T00:43:31+00:00","breadcrumb":{"@id":"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-use-pdf-js-to-load-file-from-url-and-figure-out-cors-block\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-use-pdf-js-to-load-file-from-url-and-figure-out-cors-block\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-use-pdf-js-to-load-file-from-url-and-figure-out-cors-block\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/pdfjs.libertynlp.com\/"},{"@type":"ListItem","position":2,"name":"How to use PDF.js to load file from URL and figure out CORS block?"}]},{"@type":"Article","@id":"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-use-pdf-js-to-load-file-from-url-and-figure-out-cors-block\/#article","isPartOf":{"@id":"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-use-pdf-js-to-load-file-from-url-and-figure-out-cors-block\/"},"author":{"name":"Chaoxu Wei","@id":"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/6bac77d073615c351c81d1443558c032"},"headline":"How to use PDF.js to load file from URL and figure out CORS block?","datePublished":"2022-06-24T16:07:27+00:00","dateModified":"2022-06-25T00:43:31+00:00","mainEntityOfPage":{"@id":"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/25\/how-to-use-pdf-js-to-load-file-from-url-and-figure-out-cors-block\/"},"wordCount":571,"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-use-pdf-js-to-load-file-from-url-and-figure-out-cors-block\/#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\/3500","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=3500"}],"version-history":[{"count":113,"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/posts\/3500\/revisions"}],"predecessor-version":[{"id":3633,"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/posts\/3500\/revisions\/3633"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/media\/3614"}],"wp:attachment":[{"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/media?parent=3500"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/categories?post=3500"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/tags?post=3500"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}