How to Fix CORS Errors in WordPress?

WordPress sites will work perfectly fine as long as you use it in a simple manner. It will throw you different types of errors, the moment you want to add additional features and third-party scripts. In our earlier article, we have explained about the problem with WP-Cron while using Cloudflare. Similarly, CORS error is another popular WordPress error that many users struggle to fix. In this article, we will explore what is CORS and how to fix CORS errors in WordPress.

What is CORS?

CORS stands for Cross-Origin Resource Sharing. By default, a web browser allows all the requests originated from the same server using same-origin security policy. Here is a precise definition of  same-origin policy from Wikipedia:

Under the policy, a web browser permits scripts contained in a first web page to access data in a second web page, but only if both web pages have the same origin.

Wikipedia

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

Example of CORS and Seeing Errors

Let’s take a case that you are opening a page https://site1.com/page1 which has an embedded JavaScript and calls it from https://site2.com/page2. CORS will tell the browser whether the cross-origin request from site2 is allowed by site 1. Otherwise, browser will block this request and show CORS related errors in the console.

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

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

The same page when opened in Mac Safari browser will show different errors like below. It shows the error as “Origin ‘….’ is not allowed by Access-Control-Allow-Origin. Status code: 401”. You can also see errors like “XMLHttpRequest cannot load ‘…..’ due to access control checks”.

Whenever you see console errors related to access control checks, you can safely assume they are related to CORS issue. As a result, you the script will fail to load and you will not see the advertisement or the expected result on the page.

Fix CORS Errors in WordPress

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

Access-Control-Allow-Origin: *

There are three different ways you can achieve this depending upon the scenario.

1. Allowing All Sites

This is the most common way of allowing CORS. If you want to allow any third-party server requests on your site, then add the following code in your htaccess file. The * is used as a wildcard for allowing any third-party domains.

<ifModule mod_headers.c>
Header set Access-Control-Allow-Origin: *
</ifModule>

2. Allow Specific Domain

The above method is not recommended as any hijackers can inject malicious script files on your site and cause trouble. The correct approach is to allow cross-origin resource sharing only from the domain you need. You can replace the * with the name of the domain as given below:

<ifModule mod_headers.c>
Header set Access-Control-Allow-Origin: https://site2.com
</ifModule>

Unfortunately, this is not easy to do as you need server side coding to validate the domain allowed in the header access control. Therefore, option #1 is used by many WordPress users as it does not need any additional coding.

3. Allow Specific Files from All Servers

The last option is to restrict the file type you want to allow from third-party servers. For this, you can use the following code indicating the allowed file types in your htaccess file.

<IfModule mod_headers.c>
  <FilesMatch "\.(png|css|js)$">
    Header set Access-Control-Allow-Origin: *
  </FilesMatch>
</IfModule>

This code will allow PNG images, CSS and JS files from any servers. You can add fonts and other image file types to allow them in CORS.

Other Considerations

There are few additional considerations you may need to aware when allowing cross-origin resource sharing in WordPress.

• Some hosting companies needs you to disable their caching for CORS to work. For example, if you are on SiteGround, you need to disable NGINX direct delivery under “Site Tools > Speed > Cache” section.
• When using Cloudflare or any other CDN with caching setup, you may need to purge the cache completely for the changes to reflect from the origin server.
• CORS can also create problem when using HTTP and HTTPS protocols. This will generally show as mixed content error in browser console and you need to force using HTTPS on your site to block other protocols.
• Another consideration is serving static and other resources from subdomain to primary domain. This will work perfectly since both subdomain and primary domains are generally on the same origin server. However, it may also create problems depending upon the setup on your server. You can resolve this problem by specifically mentioning the subdomain as explained above in option #2.