Skip to main content

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]

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.

Reply


Terms & ConditionsCookie settings