How to solve CORS Error while creating PDF Flipbook in Joomla?

Have you encountered a CORS issue while displaying a PDF flipbook using the Dearflip Joomla Flipbook extension? If yes, you may notice errors in the browser console that indicate the problem. Typically, these errors will mention something like "Access to XMLHttpRequest at [URL] from Origin [Origin URL] has been blocked by CORS policy".

Cross-site Origin Access is a security feature implemented by web browsers to prevent websites from making requests to a different domain without proper authorization. It is a protection mechanism to prevent malicious activities. When a request is made to a different domain, the browser sends an HTTP header called "Origin" with the request to verify if it is allowed.

Why am I not able to display a PDF Flipbook in Joomla?

Some of our users get into the Cross-Site Origin Access error while trying to display PDF Flipbook in Joomla. There are mainly two reasons that can create such an issue.

1. You are trying to display a PDF hosted on another website/domain.

A CORS error can occur while creating a PDF Flipbook in Joomla with a PDF file located in another domain or website. To solve this problem, you'll need to enable the Cross-Site Origin Access option on the website where the PDF is located. To do so, 2. Your site is accessible through multiple domain prefixs.

Joomla has a built-in option to enable/disable CORS. To verify the CORS settings, follow these steps:

  • Log in to your Joomla administrator dashboard.
  • Go to "System" and select "Global Configuration".
  • In the "Server" tab, make sure the "CORS settings" option is set to "Yes".

If the PDF Flipbook in Joomla still shows a CORS error, you can try adding custom headers to the .htaccess file of your Joomla installation. Here's how:

1. Access your hosting account via FTP or use the "File Manager" in your hosting control panel

2. Locate the .htaccess file in the root folder of your Joomla installation.
3. Open the .htaccess file and add the following lines at the beginning of the file:

IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>

4. Save the .htaccess file and upload it back to the server, replacing the existing file if prompted.
5.: Test the CORS Fix
After updating the .htaccess file, test the PDF flipbook in Joomla to see if the CORS issue is resolved. Make sure to clear your browser cache before testing.

Please note that allowing all origins (*) may not be recommended for security reasons. If you want to specify specific domains that are allowed to make requests to your Joomla site, you can replace the * in the above code with the desired domain(s).

If the CORS issue persists, it could be due to server-side configuration or limitations imposed by your hosting provider. In this case, it might be necessary to consult with your hosting provider or seek help from a Joomla expert. After properly allowing the Cross-Origin Resource Sharing, you will be able to display PDF Flipbook on your Joomla website.

Remember, making changes to server configuration files like .htaccess carries some risks, so it's always a good idea to take a backup of your .htaccess file before making any modifications.

 

2. Your site is accessible through multiple domain prefixes.

Another reason for the CORS issue to occur while creating a PDF Flipbook in Joomla might be due to multiple domain prefixes.

For example, your site is accessible with both www and non-www URLs: https://www.example.com and https://example.com  In such a case. the Joomla flipbook will show a CORS error while accessing the site through https://www.example.com. But will display without any problem when accessed with https://example.com. Or vice versa. The solution to this problem is redirection to one URL. Either a www or non-www.