3D FlipBook - CORS Error

n***c@juratech.rs

2025-01-08

Access to fetch at 'xxx' from origin 'xxx' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

This is happening when I added production Filpbook, and didn't happend while testing on test server. Both tests and production are on the same server. Also it's working on some PC but on the other not. Or on some browsers and on the other not. I implemented JQuery in Angular project. And I am using "jquery": "^3.7.0", and "3d-flip-book": "^1.9.9".

Also I am getting all JS and CSS and Templates from assets folder -> 3d-filpbook "node_modules/jquery/dist/jquery.min.js", "src/assets/3d-flipbook/js/pdf.worker.js", "src/assets/3d-flipbook/js/libs/pdf.min.js", "src/assets/3d-flipbook/js/libs/html2canvas.min.js", "src/assets/3d-flipbook/js/libs/three.min.js", "src/assets/3d-flipbook/js/dist/3dflipbook.js".

For backend we are using .Net and we added CorsPolicy to allow all.

Replies

a***r@3dflipbook.net

2025-01-15

If you try to use pdfs from different origin, you need to set CORS policy on the server where you store your pdfs, for .htaccess based configs it looks like:

# CORS for PDFs
<IfModule mod_headers.c>
<Files ~ ".*\.pdf$">
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods "GET"
Header add Access-Control-Allow-Headers: "Range"
Header add Access-Control-Expose-Headers: "Accept-Ranges, Content-Encoding, Content-Length, Content-Range"
</Files>
</IfModule>