Unable to submit POST request because of CORS

Figma plugins run under iframe context with has no origin null

So the documentation asks us to set * wildcard origin in order to make the extension work.

let imageBytes = await image.getBytesAsync();
let response = await fetch(`${BASE_URL}/api.php?figma=true`, {
    method: "POST",
    body: imageBytes,
    headers: {
        Origin: BASE_URL,
    },
    cache: "no-cache",
    credentials: "omit",
    referrer: BASE_URL,
});

My PHP code to set the CORS looks like

function cors() {
    header("Access-Control-Allow-Origin: *");

    if ($_SERVER["REQUEST_METHOD"] == "OPTIONS") {
        if (isset($_SERVER["HTTP_ACCESS_CONTROL_REQUEST_METHOD"])) {
            header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
        }

        if (isset($_SERVER["HTTP_ACCESS_CONTROL_REQUEST_HEADERS"])) {
            header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
        }
        exit(0);
    }
}

// do stuff here

cors();

// send response here

When I call the plugin from the figma, I get this in the code

enter image description here

But when I use localhost proxies via ngrok, same code works

Also I had setup my cors config in the .htaccess file

# Enable CORS
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "GET, POST, OPTIONS"
Header always set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"

# Handle OPTIONS requests
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]
3 Likes

I don’t have a solution to this, but wanted to add: it’d be helpful if the documentation for Figma’s fetch() API specified what the options were for the referrer prop and how they differ from that of the native fetch() API (if at all). Facing some similar issues to OP when trying to call a Netlify function from a Figma plugin.

1 Like