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?

CORS (Cross-Origin Resource Sharing) errors occur when your front-end JavaScript tries to access data from another domain that doesn't permit such access. In Webflow, you can't access CMS Collection data via front-end JavaScript directly through the API due to CORS restrictions unless you're doing it from a server with proper headers or using a serverless function.

1. Why Your Script Fails with CORS

• Webflow CMS API requires authentication with a token and only allows server-side access (not client-side) due to security and CORS.
• When using front-end JavaScript (fetch() or XMLHttpRequest) from a published Webflow site to access the Webflow CMS API, it throws a CORS error, because Webflow's API does not allow client-side requests from external origins.

2. Alternative Solutions

To show CMS item counts in a Webflow site, here are your best options:

• Option 1: Use Webflow’s built-in Collection List + Custom Code

• Add a Collection List to your page.

• Turn on pagination (e.g., 100 limit).

• Add a small block of JavaScript at the end of the page to count the number of elements with a CMS class:

  • Use document.querySelectorAll('.w-dyn-item').length to get CMS items on that page.
  • Note: This only counts CMS items rendered on that page (won’t count all in the collection if pagination is on).

• Option 2: Use a Serverless Function (e.g., Netlify Function, Vercel Function)

• Create a lightweight serverless function using your Webflow API token to proxy the request.

• From your Webflow front end, fetch the data from your function’s endpoint, not directly from Webflow API.

• This bypasses the CORS issue since the function runs server-side.

• Option 3: Use a Third-Party Integration

• Tools like Integromat (Make) or Zapier can periodically count CMS items and write the count to a separate CMS item or custom field.

• Display that value directly on the page using Webflow CMS bindings.

3. Specific Fix to Try (If You Must Use JS)

If you’re attempting something like:

fetch('https://api.webflow.com/collections/[collection_id]/items?...')

It will fail with CORS unless you do the following:

• Move the fetch logic to a Node.js server or serverless function.
• Ensure your request has correct Authorization headers:
• Authorization: Bearer [Your_Token]
• accept-version: 1.0.0

Then use:

• fetch('https://your-custom-endpoint.com/webflow-cms-count'), which your serverless function handles and returns just the total count.

Summary

Your front-end script won’t work directly on Webflow due to CORS limitations. To display the total number of CMS items:

• Use a serverless function to fetch from Webflow’s API, or
• Count elements client-side if only visible items are needed, or
• Pre-store the total count via automation into the CMS.

Let me know if you want a sample serverless function setup.