As long as you use your WordPress site in a simple way, it works perfectly. It gives you different types of errors when you want to add additional functionality and 3rd party scripts. In our previous article, we have explained the issues with WP-Cron when using Cloudflare. Likewise, CORS errors are another popular WordPress error that many users struggle to fix.

How to fix CORS errors in WordPress?

What is CORS?

CORS stands for Cross-Origin Resource Sharing. By default, web browsers allow all requests originating from the same server using the same-origin security policy. Here’s a precise definition of the same-origin policy from Wikipedia:

According to the policy, web browsers allow scripts contained in the first webpage to access data in the second webpage, but only if the two webpages have the same origin. –Wikipedia

Now you can easily understand the purpose of cross domain. It allows you to successfully load scripts and other resources from another domain or server. Below is a nice picture from MDN explaining the concept of same-origin and cross-origin requests.

CORS example and viewing errors

Suppose you are opening a page which has embedded JavaScript and calling it from CORS will tell the browser whether site 1 allows cross-origin requests from site 2. Otherwise, the browser will block the request and display a CORS related error in the console.

The best example of CORS is using ad scripts from third-party domains on your website. Browsers like Chrome, Firefox, Safari, and Edge will block ad scripts if you don’t allow CORS on your server. When you see no ads or any other output loaded on the page, right click on the page and select the “Inspect” option. This will open your browser’s developer console and go to the “Console” section.

You will see different types of errors showing a 403, 401 status code, or an error with no status code. For example, here is the console error shown in Google Chrome, which clearly states “Access to XMLHttpRequest at ‘…’ from origin ‘…..’ has been blocked by CORS policy”. You can also see the reason next to the error stating “The ‘Access-Control-Allow-Origin’ header has a value ‘…..’ that is not equal to the supplied origin.”

Fix CORS errors in WordPress

Now you understand what CORS is and how to find related errors in the browser console. The next step is to fix the errors so that your page loads on the browser without any errors. In simple terms, you have to add the following code in your .htaccess file to allow cross-origin resource sharing on your server.

Access-Control-Allow-Origin: *
Depending on the scenario, you can achieve this in three different ways.

  1. Allow all sites
    This is the most common way to allow CORS. If you want to allow any 3rd party server requests on your site, add the following code in your htaccess file. * is used as a wildcard to allow any third-party domain.

Header set Access-Control-Allow-Origin: *

  1. Allow specific domains
    The above method is not recommended as any hijacker can inject malicious script files on your website and cause trouble. The right thing to do is to only allow cross-origin resource sharing from the domains you need. You can replace * with the name of the domain like this:

Header set Access-Control-Allow-Origin:
Unfortunately, it’s not easy because you need server-side encoding to validate the domains allowed in the header access control. Therefore, many WordPress users use option #1 as it does not require any additional coding.

  1. Allow specific files from all servers
    The last option is to limit the types of files you want to allow from third-party servers. To do this, you can use the following code to indicate what file types are allowed in the htaccess file.

Header set Access-Control-Allow-Origin: *
This code will allow PNG images, CSS and JS files from any server. You can add fonts and other image file types to allow them to be used in CORS.

Recommended reading:

How to install FM WhatsApp APK 2022?

The latest function of fmwhatsapp group call

Leave a Reply

Your email address will not be published. Required fields are marked *