Skip to main content
Question

Unable to submit POST request because of CORS

  • May 28, 2023
  • 1 reply
  • 1368 views

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]
This topic has been closed for replies.

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.


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings