Fix Figma plugin fetch requests blocked by CORS

Why plugin requests get blocked

Figma documents it plainly: because plugins run inside a browser environment, CORS applies, plugin iframes have a null origin, and they can only call APIs that allow access from any origin. A null origin cannot be matched by name, so a server that echoes specific origins, or sends Access-Control-Allow-Origin: https://www.figma.com, still fails. The request shows up in the browser console as blocked by CORS policy; your plugin code only sees TypeError: Failed to fetch.

A second gate sits in front of it. Since the networkAccess manifest field exists, a plugin may only talk to the domains listed in allowedDomains; a request to anything else is stopped by the Figma content security policy and logged as a CSP error, which looks similar but has nothing to do with the API. Both gates must be open: the domain allowed in the manifest, and the response carrying Access-Control-Allow-Origin: *.

Allow the proxy domain in the manifest

The browser connects to proxy.cors.dev only; the API host is part of the path, so it is the proxy domain you list. reasoning is optional for a specific domain and required when allowedDomains contains *. Use devAllowedDomains for local servers during development instead of widening the public list.

{
  "name": "Headline Filler",
  "id": "1234567890123456789",
  "api": "1.0.0",
  "main": "code.js",
  "ui": "ui.html",
  "editorType": ["figma"],
  "documentAccess": "dynamic-page",
  "networkAccess": {
    "allowedDomains": ["https://proxy.cors.dev"],
    "reasoning": "Fetches public RSS headlines through a CORS proxy to fill text layers."
  }
}

Fetch through the proxy from code.ts or ui.html

fetch is available in the main plugin thread as well as in the UI iframe, and both carry a null origin, so the same prefix works in either place. Verified while writing this page: a request with Origin: null to the proxy comes back with Access-Control-Allow-Origin: * and X-Cors-Source: upstream. The example fills selected text layers with live headlines from an RSS feed that sends no CORS header, the kind of real content a mockup plugin needs.

const PROXY = 'https://proxy.cors.dev/';
const FEED = 'https://feeds.bbci.co.uk/news/technology/rss.xml';

async function fetchHeadlines(): Promise<string[]> {
  // The plugin origin is null; the proxy answers Access-Control-Allow-Origin: *
  const response = await fetch(PROXY + FEED);
  if (!response.ok) {
    throw new Error(`Feed request failed: ${response.headers.get('X-Cors-Error') ?? response.status}`);
  }
  const xml = await response.text();

  // No DOMParser in the plugin sandbox: a small regex is enough for RSS titles
  return [...xml.matchAll(/<item>[\s\S]*?<title>(?:<!\[CDATA\[)?([\s\S]*?)(?:\]\]>)?<\/title>/g)]
    .map((match) => match[1].trim());
}

async function fillSelection() {
  const textNodes = figma.currentPage.selection.filter((node): node is TextNode => node.type === 'TEXT');
  if (textNodes.length === 0) {
    figma.closePlugin('Select one or more text layers first.');
    return;
  }

  const headlines = await fetchHeadlines();
  for (const [index, node] of textNodes.entries()) {
    await figma.loadFontAsync(node.fontName as FontName);
    node.characters = headlines[index % headlines.length];
  }
  figma.closePlugin(`Filled ${textNodes.length} layers.`);
}

fillSelection().catch((error: Error) => figma.closePlugin(error.message));

Anonymous requests cover GET and HEAD to any public HTTPS host and forward only Accept, If-None-Match and If-Modified-Since; a custom header such as X-Api-Key triggers a preflight and is rejected with header_not_allowed. Responses are relayed with the upstream status and Content-Type, and a proxy-side failure sets X-Cors-Error, for example response_too_large above 1 MiB or upstream_timeout after 10 seconds.

If the API is yours: send the wildcard

For a backend you run for your plugin, answer Access-Control-Allow-Origin: * and skip the proxy; the response cannot use credentials with a wildcard, which is fine because a plugin has no cookies to send anyway. Avoid Access-Control-Allow-Origin: null: it also admits sandboxed iframes and file: pages on any site, and browsers treat it as a misconfiguration. Authenticate plugin users with a token in the request instead, over a Pro Connection or directly against your own server.

Limits and pricing

Good questions.