Top Nav Bar Search Button Disappearing After Enable CDN

Hi @sibipaul, the icon disappear is because the icon’s CSS got overridden. Please follow this article to find out the related CSS and put it onto CSS Excludes fields.

I have tried all those tricks before I post here.

Kindly Note: This error happens Only when I enable CDN.

if CDN is Disabled then no issue.

Kindly note…

When the Cache Plugin is Active but CDN is Disabled – everything works.

The error comes Only when, CDN is Enabled.

I found why this error happening.

I checked Console in Browser…

There I saw some errors ” CORS Policy “

When I use WP Rocket, I could not see such errors ??

This Error comes Only When use Litespeed Cache + CDN

WP Rocket + CDN No Error

Access-Control-Allow-Origin

This is something we missing in Litespeed Cache when Enable CDN.

multiple errors showing in browser console is something like,

Access to font at ‘https://cdn.mydomain.com/wp-content/plugins/litespeed-cache/css/fonts/litespeedfont.woff?rs8ttq’ from origin ‘https://www.mydomain.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

but

when I checked my htaccess file through Litespeed cache dashboard.

Then, I can see this code

### marker CORS start ###
<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font\.css)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
### marker CORS end ###

I got a hint from here

https://www.keycdn.com/support/cors

I use AWS CDN, so I followed this tutorial

https://aws.amazon.com/premiumsupport/knowledge-center/no-access-control-allow-origin-error/

https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/header-caching.html

Litespeed Cache Plugin Missing Something?

I Tested Multiple times

Multiple Domains

Multiple Server ( AWS, Digital Ocean etc )

Multiple CDN ( AWS, Key CDN etc )

Only This Error Comes When Litespeed Cache CDN Enabled.

WP Rocket + it’s CDN Enabled Works Good.

Can You Find out anything from these hints?

@stanleylitespeed Kindly check this and do reply asap.

@sibipaul

What happens when you turn off all CSS optimization? Do you still have a problem?

All Optimization Enabled or Disabled

Problem Same.

But, This Comes Only When CDN is enabled.

Kindly Go Through All My Messages above.

The actual trouble is in Browser Console is Here.

Access to font at ‘https://cdn.mydomain.com/wp-content/themes/generatepress/fonts/generatepress.woff2’ from origin ‘https://www.mydomain.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

I can see Multiple errors Like this, All are CORS Policy.

When I disable CDN, these errors disappear and Problem solved.

when CDN is Enabled, Litespeed cache rewrites my htaccess file and adds this value

### marker CORS start ###
<FilesMatch “\.(ttf|ttc|otf|eot|woff|woff2|font\.css)$”>
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin “*”
</IfModule>
</FilesMatch>
### marker CORS end ###

when Disabled, this value also disappears.

Also, I have enabled Options in AWS CDN. according to the URL I shared above.

Today I created new Cloudfront Distribution FRESH according to the Best Practice.

The IRONY is When I use WP Rocket and Enable CDN… I could not see these errors…

Since Litespeed Cache is not a Paid Plugin…

It’s My Responsibility to Report errors…

That’s all Actually I did.

Thanks.

Yes, I did read everything you posted previously.

Thank you for verifying that the problem persists even when CSS optimization is turned off.

Would you be willing to provide your Report Number, found in WP Admin > LiteSpeed Cache > Report? There may be some anomaly in your settings that we can spot through the report.

Thank you.

Hi @sibipaul, thanks for the investigation details. As Lisa said, please share your report number with us and we can go through your setting to see is there any problems. Before you send the report, please turn the CDN config to ON (As I found you already turn ON).

Also, may I know what is your server type? OpenLiteSpeed / LiteSpeed Enterprise or other hosting panels?

It would be better if you can provide a sample site that CDN is working with WP Rocket.

Thanks.

Report Number is Not Showing there.

So, I took the report Summary from there.

Server Variables
    SERVER_SOFTWARE = LiteSpeed
    DOCUMENT_ROOT = /home/fastunlocker.in/public_html
    X-LSCACHE = on,crawler
    LSWCP_TAG_PREFIX = f35
    WP_SITEURL = NULL
    WP_HOME = NULL
    WP_CONTENT_DIR = /home/fastunlocker.in/public_html/wp-content
    SHORTINIT = false
    LSCWP_CONTENT_DIR = /home/fastunlocker.in/public_html/wp-content
    LSCWP_CONTENT_FOLDER = wp-content
    LSCWP_DIR = /home/fastunlocker.in/public_html/wp-content/plugins/litespeed-cache/
    LITESPEED_TIME_OFFSET = 19800.0
    LITESPEED_SERVER_TYPE = LITESPEED_SERVER_OLS
    LITESPEED_CLI = NULL
    LITESPEED_ALLOWED = true
    LITESPEED_ON = true
    LITESPEED_ON_IN_SETTING = true
    LSCACHE_ADV_CACHE = true
    LSWCP_TAG_PREFIX = f35

Wordpress Specific Extras
    wordpress version = 5.3
    siteurl = https://www.fastunlocker.in
    home = https://www.fastunlocker.in
    home_url = https://www.fastunlocker.in
    locale = en_US
    active theme = GeneratePress
    active plugins = array (
  0 => 'gp-premium/gp-premium.php',
  1 => 'litespeed-cache/litespeed-cache.php',
)

LSCache Plugin Options
    version = 2.9.9.2
    radio_select = 1
    auto_upgrade = false
    news = false
    purge_upgrade = false
    cache_priv = true
    cache_commenter = true
    cache_rest = true
    cache_page_login = true
    timed_urls = 
    timed_urls_time = 
    cache_favicon = true
    cache_resources = true
    mobileview_enabled = false
    mobileview_rules = Mobile|Android|Silk/|Kindle|BlackBerry|Opera\ Mini|Opera\ Mobi
    cache_object = false
    cache_object_kind = true
    cache_object_host = localhost
    cache_object_port = 6379
    cache_object_life = 360
    cache_object_persistent = true
    cache_object_admin = true
    cache_object_transients = true
    cache_object_db_id = 0
    cache_object_user = 
    cache_object_pswd = 
    cache_browser = false
    cache_browser_ttl = 2592000
    login_cookie = 
    check_advancedcache = true
    use_http_for_https_vary = false
    debug_disable_all = false
    debug = 0
    admin_ips = 127.0.0.1
    debug_level = false
    log_file_size = 3
    heartbeat = true
    debug_cookie = false
    collaps_qs = false
    log_filters = false
    public_ttl = 604800
    private_ttl = 1800
    front_page_ttl = 604800
    feed_ttl = 0
    403_ttl = 3600
    404_ttl = 3600
    500_ttl = 3600
    purge_by_post = -.A.D.F.H.M.PGS.PGSRP.PT.T.Y
    excludes_qs = 
    excludes_cat = 
    excludes_tag = 
    instant_click = false
    css_minify = false
    css_inline_minify = false
    css_combine = false
    css_combined_priority = false
    css_http2 = false
    css_exclude = 
    js_minify = false
    js_inline_minify = false
    js_combine = false
    js_combined_priority = false
    js_http2 = false
    js_exclude = 
    optimize_ttl = 604800
    html_minify = false
    optm_qs_rm = false
    optm_ggfonts_rm = false
    optm_css_async = false
    optm_ccss_gen = true
    optm_ccss_async = true
    optm_css_async_inline = true
    optm_js_defer = false
    optm_emoji_rm = false
    optm_exclude_jquery = true
    optm_ggfonts_async = false
    optm_max_size = 1.2
    optm_rm_comment = false
    cdn = true
    cdn_ori = //www.fastunlocker.in/
    cdn_exclude = 
    cdn_remote_jquery = 0
    cdn_quic = false
    cdn_quic_email = 
    cdn_quic_key = 
    cdn_cloudflare = false
    cdn_cloudflare_email = 
    cdn_cloudflare_key = 
    cdn_cloudflare_name = 
    cdn_cloudflare_zone = 
    media_img_lazy = false
    media_img_lazy_placeholder = 
    media_placeholder_resp = false
    media_placeholder_resp_color = #cfd4db
    media_placeholder_resp_async = true
    media_iframe_lazy = false
    media_img_lazyjs_inline = false
    media_optm_auto = false
    media_optm_cron = true
    media_optm_ori = true
    media_rm_ori_bkup = false
    media_optm_webp = false
    media_optm_lossless = false
    media_optm_exif = false
    media_webp_replace = false
    media_webp_replace_srcset = false
    hash = wKjZcDYCorpDlHKlRwWqOUgkTjTw9aNm
    nocache_cookies = 
    nocache_useragents = 
    crawler_include_posts = true
    crawler_include_pages = true
    crawler_include_cats = true
    crawler_include_tags = true
    crawler_excludes_cpt = 
    crawler_order_links = date_desc
    crawler_usleep = 500
    crawler_run_duration = 400
    crawler_run_interval = 600
    crawler_crawl_interval = 302400
    crawler_threads = 3
    crawler_load_limit = 1
    crawler_domain_ip = 
    crawler_custom_sitemap = 
    crawler_cron_active = false
    esi_enabled = false
    esi_cached_admbar = false
    esi_cached_commform = false
    litespeed-cache-vary-group = array (
  'administrator' => '99',
  'author' => '0',
  'contributor' => '0',
  'editor' => '0',
  'subscriber' => '0',
)
    litespeed-cache-exclude-optimization-roles = array (
)
    litespeed-cache-exclude-cache-roles = array (
)
    litespeed-optm-css = 
    litespeed-optm-js-defer-excludes = 
    litespeed-media-lazy-img-excludes = 
    litespeed-media-lazy-img-cls-excludes = 
    litespeed-media-need-pull = false
    litespeed-cache-drop_qs = 
    litespeed-cache-cdn_mapping = array (
  0 => 
  array (
    'url' => 'https://cdn.fastunlocker.in/',
    'inc_img' => '1',
    'inc_css' => '1',
    'inc_js' => '1',
    'filetype' => '.aac
.css
.eot
.gif
.jpeg
.js
.jpg
.less
.mp3
.mp4
.ogg
.otf
.pdf
.png
.svg
.ttf
.woff
.woff2',
  ),
)
    litespeed-cdn-ori_dir = wp-content
wp-includes
/min/
    litespeed-cache-dns_prefetch = 
    litespeed-cache-cloudflare_status = false
    litespeed-log_ignore_filters = gettext
gettext_with_context
get_the_terms
get_term
    litespeed-log_ignore_part_filters = i18n
locale
settings
option
    litespeed-object_global_groups = users
userlogins
usermeta
user_meta
site-transient
site-options
site-lookup
blog-lookup
blog-details
rss
global-posts
blog-id-cache
    litespeed-object_non_persistent_groups = comment
counts
plugins
wc_session_id
    litespeed-crawler-as-uids = 
    litespeed-crawler-cookies = array (
)
    litespeed-adv-purge_all_hooks = switch_theme
wp_create_nav_menu
wp_update_nav_menu
wp_delete_nav_menu
create_term
edit_terms
delete_term
add_link
edit_link
delete_link
    litespeed-forced_cache_uri = 
    litespeed-cache_uri_priv = 
    litespeed-optm_excludes = 
    litespeed-excludes_uri = 
    litespeed-media-webp_attribute = img.src
div.data-thumb
img.data-src
div.data-large_image
img.retina_logo_url
    litespeed-optm-ccss-separate_posttype = 
    litespeed-optm-css-separate_uri = 

/home/fastunlocker.in/public_html/.htaccess contents:
### Rewrite Rules Added by CyberPanel Rewrite Rule Generator

RewriteEngine On
RewriteCond %{HTTPS}  !=on
RewriteRule ^/?(.*) https://%{SERVER_NAME}/$1 [R,L]

### End CyberPanel Generated Rules.

# BEGIN LSCACHE
## LITESPEED WP CACHE PLUGIN - Do not edit the contents of this block! ##
<IfModule LiteSpeed>
RewriteEngine on
CacheLookup on
RewriteRule .* - [E=Cache-Control:no-autoflush]
RewriteRule ^min/\w+\.(css|js) - [E=cache-control:no-vary]

### marker CACHE RESOURCE start ###
RewriteRule wp-content/.*/[^/]*(responsive|css|js|dynamic|loader|fonts)\.php - [E=cache-control:max-age=3600]
### marker CACHE RESOURCE end ###

### marker LOGIN COOKIE start ###
RewriteRule .? - [E="Cache-Vary:wp-postpass_b175cd0bdb3cfc5d19c6b6b29134bbc0"]
### marker LOGIN COOKIE end ###

### marker FAVICON start ###
RewriteRule favicon\.ico$ - [E=cache-control:max-age=86400]
### marker FAVICON end ###

### marker CORS start ###
<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font\.css)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
### marker CORS end ###

</IfModule>
## LITESPEED WP CACHE PLUGIN - Do not edit the contents of this block! ##
# END LSCACHE
# BEGIN NON_LSCACHE
## LITESPEED WP CACHE PLUGIN - Do not edit the contents of this block! ##
### marker MINIFY start ###
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} ^(.*)/min/(\w+)\.(css|js)$
RewriteCond %1/wp-content/cache/$2/$1.$2 -f
RewriteRule min/(\w+)\.(css|js) wp-content/cache/$2/$1.$2 [L]
</IfModule>
### marker MINIFY end ###

## LITESPEED WP CACHE PLUGIN - Do not edit the contents of this block! ##
# END NON_LSCACHE

# BEGIN WordPress
# The directives (lines) between <code>BEGIN WordPress</code> and <code>END WordPress</code> are
# dynamically generated, and should only be modified via WordPress filters.
# Any changes to the directives between these markers will be overwritten.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

As you are using CyberPanel and not enable, some .htaccess script cannot be loaded, please try to follow this article to add extra http header on you site.

After that, please try to run:
curl -I -X GET https://www.YOUR_DOMAIN.xx/wp-content/themes/generatepress/fonts/generatepress.woff2

You should see Access-Control-Allow-Origin: * on the header. Then please purge the cache from you CDN to see does it work.