Trendous viralate
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, a.secondexample.com tries to deliver resources from b.example.com. CORS informs the browser to check the permissions of a.example.com before accepting a cross-origin request, such as a JavaScript or image, from b.secondexample.com. Resources that are prohibited by CORS are not loaded by the browser.
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.
