Fix CORS errors in Webflow custom code

Where Webflow custom code runs

Everything you paste into an Embed element, the page settings head and footer, or the site-wide custom code runs in the browser of each visitor after the page loads; the Designer shows a placeholder and runs none of it. The browser applies the same-origin policy to every fetch() or XMLHttpRequest your script makes: a response from another origin is handed to your code only when it carries Access-Control-Allow-Origin with your site origin or *. Your staging domain and your custom domain are two different origins, so an API that allows one by name does not allow the other.

Chrome reports Access to fetch at ... from origin https://yoursite.webflow.io has been blocked by CORS policy and the fetch rejects with TypeError: Failed to fetch. The request usually reached the API; the browser withheld the answer. One check tells you whether a given API needs help.

# No output: the API sends no CORS header, so the embed will be blocked
curl -sI -H 'Origin: https://yoursite.webflow.io' https://feeds.bbci.co.uk/news/technology/rss.xml \
  | grep -i access-control-allow-origin

# access-control-allow-origin: * means fetch() works directly, no proxy needed
curl -sI -H 'Origin: https://yoursite.webflow.io' https://api.frankfurter.app/latest?from=EUR \
  | grep -i access-control-allow-origin

APIs that work directly

APIs built for browser use send Access-Control-Allow-Origin: * and need nothing from you: api.github.com, api.open-meteo.com, api.frankfurter.app, most headless CMS delivery APIs and payment widgets do. Call those as-is. The embed below is for the other kind: feeds, scores, prices and legacy JSON endpoints that answer without the header.

Public data: prefix a proxy in the embed

A CORS proxy fetches the API from its own servers and relays the response with Access-Control-Allow-Origin set to the calling origin, so the browser lets your script read it. With cors.dev that is the URL prefix and nothing else. The example shows the five latest headlines of a feed that sends no CORS header; swap in any public feed or JSON API. Build the DOM with textContent and elements rather than innerHTML, since the data comes from another site.

<ul id="headlines"><li>Loading headlines...</li></ul>

<script>
  (async () => {
    const list = document.getElementById('headlines');
    const feed = 'https://feeds.bbci.co.uk/news/technology/rss.xml';

    try {
      const response = await fetch('https://proxy.cors.dev/' + feed, { credentials: 'omit' });
      if (!response.ok) {
        throw new Error(response.headers.get('X-Cors-Error') || 'HTTP ' + response.status);
      }

      const xml = new DOMParser().parseFromString(await response.text(), 'application/xml');
      const items = [...xml.querySelectorAll('item')].slice(0, 5);

      list.replaceChildren(
        ...items.map((item) => {
          const li = document.createElement('li');
          const link = document.createElement('a');
          link.href = item.querySelector('link')?.textContent.trim() || '#';
          link.textContent = item.querySelector('title')?.textContent.trim() || 'Untitled';
          link.target = '_blank';
          link.rel = 'noopener';
          li.append(link);
          return li;
        }),
      );
    } catch (error) {
      list.textContent = 'Could not load headlines: ' + error.message;
    }
  })();
</script>

Publish the site to see it run: embeds do not execute inside the Designer. Anonymous requests work from the webflow.io staging domain and from custom domains alike, cover GET and HEAD to any public HTTPS host, forward only Accept, If-None-Match and If-Modified-Since, and never forward cookies. Responses keep the upstream status and Content-Type; a proxy-side failure sets X-Cors-Error, for example response_too_large above 1 MiB or upstream_timeout after 10 seconds.

APIs with keys: not in an embed

Anything in custom code is visible to every visitor through view-source, including API keys, and the anonymous proxy rejects credential-like query names such as key and custom headers such as X-Api-Key for that reason. Keyed integrations belong on a server: a Webflow Cloud route on your own origin, a small serverless function that holds the key and answers with CORS headers, or an automation (Make, Zapier, n8n) that writes the data into CMS items on a schedule so the page needs no runtime call at all. A Pro Connection forwards Authorization and custom headers, which fits per-visitor tokens, not a shared secret.

Limits and pricing

Good questions.