Errors with slider revolution and CDN

Hello @arpitkr

I am sorry about the issue you are experiencing and I am happy to assist you with this.
I’ve checked your website and I am not seeing the errors in the console you are mentioning, and I can see that the CDN is enabled.
Can you please confirm you are still experiencing the issue?
Thanks!

My bad, the errors appear when you tap on “Start Invitation” button. Those errors are still present.( I have disabled the pre loader for now so that its easier for you to get there)

As this is a production system, I had to minify the files. Those errors would now show scripts as autoptmize file rather then the actual three.min.js. If you would like, I can replicate this behavior on staging ( with minification turned off).

Hello @arpitkr

Thank you for yoru feedback.
This issue does not seem related to W3 Total Cache. Since you are using AO to minify assets, I would suggest reaching out to AO support for more assistance with this.
Thanks!

Hi @vmarko , from what I have provided, yes it does seem like an AO issue.

Infact its not. I am trying to get a staging environment setup in cloud. If you can give me a couple of days, I will be able to provide much better debug-able environment.

Thanks for your time and patience.

Hi @vmarko , so the issue is fixed on the staging site, but somehow the same fix isn’t working on live site. Let me give you details of what was found ,and what was done
Link to stating environment (working): https://staging.invitekaro.com/2022/04/26/basic-invite/
Link to production environment ( broken): https://www.invitekaro.com/2022/04/26/basic-invite/

1. After disabling AO, and CDN for slider revolution, we were still getting the following error.
THREE.WebGLState: – SecurityError: The operation is insecure. — three.min.js:5
2. On Further investigation, is was found that WebGL has issues with cross domain image access. (https://webglfundamentals.org/webgl/lessons/webgl-cors-permission.html)
3. Hence, temporarily, I disabled CDN for Media library, and everything started working as expected.
3. We discovered that, Slider Revolution provides an option to configure CORS permissions for images within the modules. (https://www.sliderrevolution.com/faq/cors)
4. We set CORS for images to “Anonymous” in slider revolution, re-enabled CDN for Media Library, and everything seems to be working as expected. You may check the Link https://staging.invitekaro.com/2022/04/26/basic-invite/
5. Now we went ahead, and replicated everything on Production from staging, step by step. W3 total cache on production is now an exact replica of staging. However, we are getting CORS error in production. (You may check console logs: https://www.invitekaro.com/2022/04/26/basic-invite/)
6. Both production and staging use different Azure CDN endpoints, and both have rules enabled on Azure to add CORS to header for source domain.

Other then purging the complete CDN, I have done almost everything else. But the issue on production persists.
Additionally, in networks tab on production, I can see an image being referenced to twice, as opposed to once in staging environment. One instance of the image has CORS issue, the other one doesn’t.

Is there something I am missing?

• This reply was modified 2 years, 6 months ago by arpitkr.

Hello @arpitkr

Thank you for the information.
Yes, I do see the CORS problem now on the prod website.
Can you please check if the CORS is enabled in the Performance>CDN?
What you can do is try to add custom CORS rules for your images in the nginx.conf on the top of the file outside of W3TC rules:

location ~* \.(png|ico|jpg|jpeg|jpe|webp)$ {
    add_header Access-Control-Allow-Origin *;
}

Alternatively, try excluding the image from being served from the CDN in Performance>CDN>Advanced>Rejected files: – For example:
/wp-content/uploads/2022/04/729335.png

I hope this helps!

Thanks!

Hi @vmarko , the issue is resolved now. Apparently, slider revolution maintains a cache of its own. Once I cleared it, all the errors went away.

Hello @arpitkr

Thank you for the information. This will be very helpful information for possible future problems related to this kind of issue.

We would really appreciate it if you could take a minute and post a review?here. This will help us to continue offering a top-notch product to users.
Thanks!

Done