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]
1 Like