How to easily fix CORS Errors in WordPress with CloudFlare and Litespeed Cache

CORS Errors in Wordpress, cloudflare and litespeed cache

After searching the internet for definitive answers on Cloudflare, Litespeed, and WordPress integration with Cross-Origin Resource Sharing (CORS), I was forced to figure it out on my own.

How do you know you have a CORS errors?

My site could not load any icons. Signup, checkout, trending, and other icons could not be loaded. 

 I had to remove my site from cloudflare for like 3 months to QUIC cloud CDN. However, I realized Cloudflare offers more and has more POPS than QUIC. 

So I got the site back to Cloudflare and figured it out. Others in these communities are still struggling.

 How to fix cloudflare CORS errors not working on WordPress

  • Create a page rule
  • Choose Auto Minify, ON
  • Choose automatic https rewrites, ON.
  • Also choose Origin cache control, ON.
  • Server side excludes, ON 

Then move to the server and configure ht-access file and update Access-Control-Allow-Origin headers. Add;

 Access-Control-Allow-Origin: *   

What is Cross-Origin Resource Sharing (CORS)

An external website resource request is referred to as a cross-origin request. As an illustration, tries to deliver resources from CORS informs the browser to check the permissions of before accepting a cross-origin request, such as a JavaScript or image, from Resources that are prohibited by CORS are not loaded by the browser.

CORS Errors in WordPress, cloudflare and litespeed cache
CORS errors

Cloudflare and CORS errors

Using the host header, origin header, URL path, and query to recognize cached resources, Cloudflare helps. This lets different sites use different origin headers but the same host header.

The origin server is sending Access-Control-Allow-Origin headers to the browser. The Access-Control-Allow-Origin header lets servers define the conditions under which they will share their resources with other domains.

A server replies with a value for the Access-Control-Allow-Origin header in response to a request to access a resource. On cacheable material, Access-Control-Allow-Origin headers are often used.
A web server may send back different Access-Control headers based on the Origin header given in the request. 

Solving the CORS errors is very simple, do not burn your midnight oil trying to figure out how to do it.

What do you think?

100 Points
Upvote Downvote
Avatar of Trendous viralate

Written by Trendous viralate

Blogger and Passionate Person who likes to go with viral trends.

Leave a Reply

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

      betu review on crypto

      BetU review 2022: BetU cryptocurrency betting with massive bonuses and tokens

      von washing machines reviews

      Best Reviews on Von washing machines, durability and reliability