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?
TL;DR
- Webflow CMS API cannot be accessed directly from browser-side JavaScript due to CORS restrictions.
- Instead, either count rendered
.w-dyn-itemelements client-side or use a secure serverless function to fetch data from the API and return it to your site.
You're trying to run a script that fetches the total CMS items from a Webflow Collection and shows it in a .users element, but you're encountering a CORS (Cross-Origin Resource Sharing) error.
1. Understand Why CORS Fails in Webflow
- CORS errors happen when JavaScript running in the browser tries to request data from another domain (like Webflow’s CMS API) without proper permissions.
- Webflow’s CMS API is not accessible from the browser directly due to security restrictions. It does not support client-side API calls from published Webflow sites or the Designer.
- Any attempts to fetch data from the CMS API using browser-side JavaScript (like
fetch()orXMLHttpRequest) will throw a CORS 403 error, unless routed through a proxy or server.
2. Why This Script Will Not Work as Is
- If your script directly queries Webflow’s CMS API from the front-end of your Webflow site (e.g., from inside an
<script>tag), it will not work due to CORS protection enforced by Webflow. - You need to access the API from a secure backend server or use Webflow’s built-in CMS rendering features instead.
3. Alternative Solutions
- Use Webflow’s CMS Collection Lists:
- If you're trying to show how many items exist in a Collection, consider rendering the collection list directly.
- Then use JavaScript to count
.w-dyn-itemelements (Webflow's default class for each item).- Example:
document.querySelectorAll('.w-dyn-item').length.
- Example:
- Use a Serverless Function or Proxy:
- Host a serverless function (e.g., on Netlify Functions, Vercel, or Firebase).
- That function queries the Webflow CMS API using your API key server-side and returns the count.
- Your site can then safely fetch the count from your own endpoint, avoiding CORS limitations.
4. Security Considerations
- Never expose your Webflow API key in client-side code.
- Always proxy Webflow API calls through secure, authenticated servers.
Summary
Your script will not work directly within Webflow due to CORS restrictions on the CMS API. Instead, count CMS items client-side by rendering them and counting DOM elements, or query the API from a secure backend/serverless function and then pull the result safely.