Custom JS and CSS files stop working when enqueued in function.php

[peeyush_works]

I have some custom code written for a client, it works well when it is added to Theme Options - CSS/JS.

I moved the codes into separate .css & .js files then enqueued them using function.php in a child theme. Now they work fine in desktop browsers, but failed to load on mobile browsers.

I moved the code back into Theme options and it starts to work in mobile browsers as well as desktop browsers.

I want to load the Custom css and Custom js code separately enqueued as they are residing from a different server (cross domain). This separation is done to protect the proprietary programming performed on the site. How do I achieve this ?

[mldarshana]

Hi There @peeyush.works

Thanks for writing in! It seems that you’re experiencing a CORS (Cross-Origin Resource Sharing) issue, since you’re loading your resources from another server. You can read more information about CORS from the following resource (https://www.keycdn.com/support/cors).

We also have a separate troubleshooting guide on CORS here (https://theme.co/apex/forum/t/troubleshooting-font-awesome/200), check the heading enabling CORS.

If you’re still having issues, provide us with your example page URL (make sure to reproduce the issue first), to check your issue further.

Thanks!

[peeyush_works]

But CORS would also have affected the desktop version, which is working just fine with same setup.

I did follow the article & add the CORS headers in .htaccess and checked, issue still persists on mobile browsers (I have a fully updated OnePlus 3).

What shall I do now ?

Regards

[thai]

Hi @peeyush.works,

We can’t confirm to make your code working on mobile, but can you please provide us with your code so we can take a closer look?

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Thank you for understanding.

[peeyush_works]

Thanks for your support, I figured this out myself. The second domain’s SSL certificate was self-signed, while the main site was using a recognized CA. Somehow having a self-signed SSL blocked the CORS check on mobile browsers, and assigning a proper SSL to second domain resolved the issue as CORS headers were already set.

Yeah I know, even to me it does not make complete sense, but hey, it works so it works. Took a little hit and trial but it is working perfectly now.

[ruenel]

Hey @peeyush.works,

We are just glad that you have figured it out a way to correct the said issue.
It’s good to know that everything works fine now.

Best Regards.