Will this script that shows the total amount of CMS items in a specific Webflow collection and renders it to a specified text element with class ".users" work on Webflow despite the CORS error I am receiving?

A script that fetches the total CMS item count directly via the Webflow API from the published site will not work on Webflow’s front end due to CORS restrictions. This is why you're seeing a CORS error – Webflow blocks cross-origin requests from the front end for security reasons.

1. Why It Fails on Webflow Frontend

• CORS (Cross-Origin Resource Sharing) is enforced by browsers. If your script tries to call the Webflow CMS API from the client-side (on the published site), the browser will block it.
• Webflow’s API requires an Authorization token, which should never be exposed in client-side JavaScript on a public site.
• Webflow’s API must be accessed from a secure backend environment (like a serverless function or middleware).

2. Alternative: Show Number of CMS Items Without API

If all you need is the count of items in a CMS collection, you can:

• Use CMS Collection Lists and structure your page so you can visually or programmatically count how many .collection-item elements are rendered.
• Add a script that counts those elements after the page loads.

Example approach:

• Wrap your CMS items in a Collection List wrapper with a specific class, like .user-list.

• Use this JavaScript snippet to count items:

  JavaScript (Client-side):

• const count = document.querySelectorAll('.user-list .w-dyn-item').length;

• document.querySelector('.users').textContent = count;

This does not require the Webflow API, avoids CORS errors, and works on all published Webflow sites.

3. If You Must Use the Webflow API

If you're trying to pull CMS count dynamically via Webflow API (even from a different site or dashboard):

• Set up a backend using Node.js, serverless functions (like Netlify Functions, AWS Lambda, etc.), or an integration platform.
• From your backend, make an authorized API call to Webflow to get the collection item count.
• Serve that response through your backend, and then fetch it from your Webflow site (since your backend can set proper CORS headers).

Summary

Scripts that call the Webflow CMS API from client-side JavaScript will fail on published sites due to CORS restrictions and API token security policies. To show a total item count:

• Use client-side DOM counting of CMS elements if they’re rendered on-page.
• Use backend API access if dynamic, non-visible CMS data is needed.