هنگامی که در حال ساخت یک افزونه FIGMA هستید ، ممکن است متوجه شوید که برقراری تماس های API به همان اندازه که در یک وب سایت معمولی قرار دارد ساده نیست. اگر به خطاهای CORS رسیده اید ، تنها نیستید. در این مقاله ، من توضیح می دهم که چرا این اتفاق می افتد و با استفاده از Iframe با مبدا غیر تهی ، راه حلی را به شما نشان می دهد.
خطای CORS NULL PLUGIN FIGMA
چگونه API در افزونه FIGMA کار می کند
افزونه های FIGMA در داخل IFRAME اجرا می شوند. اما در اینجا Catch: Figma از iframe مخصوص ماسهبازی استفاده می کند که دارای یک است مبدا تهیبشر هنگامی که سعی می کنید یک تماس API را مستقیماً از افزونه برقرار کنید ، درخواست از این منشأ تهی ناشی می شود و باعث ایجاد خط مشی CORS می شود. اصولاً ، مگر اینکه API هدف صریحاً درخواست هایی را از هر مبدا اجازه دهد (استفاده از چیزی مانند Access-Control-Allow-Origin: *) ، تماس API از بین نمی رود.
این با طراحی است ، و مستندات FIGMA حتی پیشنهاد می کند API را برای اجازه چنین تماس هایی تنظیم کنید. مشکل این است که ، اگر API را کنترل نکنید یا نمی خواهید آن را در دسترس جهانی قرار دهید ، به رویکرد دیگری احتیاج دارید.
خطای منشاء تهیگ FIGMA
چرا خطای CORS رخ می دهد
ریشه مشکل این است که مرورگرها قوانین به اشتراک گذاری منابع متقاطع (CORS) را اجرا می کنند. از آنجا که افزونه FIGMA شما از مبدأ تهی بارگیری شده است ، بیشتر API ها درخواست های خود را رد می کنند مگر اینکه اجازه همه منشاء را بدهند. شما با خطایی به پایان می رسید زیرا API درخواستی را مشاهده می کند که به جای یک مورد انتظار ، منشأ خاصی داشته باشد ، اجازه می دهد.
دور زدن CORS با منشاء غیر تهی در افزونه FIGMA
یک راه حل مرتب وجود دارد. در FIGMA ، می توانید یک iframe اضافی را که از یک وب سایت واقعی تهیه می شود ، بارگیری کنید ، یکی با منشأ مناسب. این با استفاده از همان ایده در پشت جریان OAUTH آنها ، جایی که یک صفحه تأیید اعتبار را بارگیری می کنید و نشانه دسترسی را در محیط افزونه FIGMA بازیابی می کنید.
به جای انجام Auth ، ما در حال بارگیری یک صفحه وب هستیم که تماس API را انجام می دهد ، و سپس داده ها را به افزونه FIGMA ما ارسال می کنیم.
دور زدن خطای منشاء تهی CORS در افزونه FIGMA
چگونه کار می کند
-
iframe منشأ غیر تهی را بارگیری کنید
از فیگما استفاده کنیدshowUIعملکردی را برای باز کردن iframe از پرونده HTML ما انجام دهید. ما باید این فایل HTML را در یک بستر میزبانی میزبانی کنیم. این پرونده تماس API را ایجاد می کند و داده ها را به افزونه باز می گرداند.
// Show the UI with your hosted webpage
figma.showUI(
''
);
-
تماس API را از صفحه وب برقرار کنید
از آنجا که صفحه وب از یک دامنه مناسب تهیه می شود ، مرورگر یک هدر مبدا ارسال می کند ، و اگر API اجازه می دهد تا منشاء آن (یا اگر از CorsFix برای دور زدن CORS استفاده می کنید) ، تماس API موفق می شود. صفحه وب فقط یک پرونده HTML استاتیک (index.html) است که می توانید در صفحات CloudFlare ، صفحات GitHub یا NetLify میزبان باشید. در اینجا نمونه ای از آنچه ممکن است پرونده HTML به نظر برسد آورده شده است:
` )
.then((response) => response.json())
.then((data) => {
// Send data back to the Figma plugin
parent.postMessage(
{ pluginMessage: { type: "fetch-result", data }, pluginId: "*" },
"*"
);
})
.catch((error) => {
parent.postMessage(
{
pluginMessage: { type: "fetch-error", error: error.message },
pluginId: "*",
},
"*"
);
});
-
نتیجه را به افزونه ارتباط دهید
هنگامی که iframe داده ها را دریافت می کند ، از آن استفاده می کندpostMessageبرای ارسال نتایج به افزونه خود. این مسئله مستقیم CORS را دور می زند زیرا این تماس دیگر از منشأ تهی ساخته نشده است. سپس افزونه برای پیام گوش می دهد و بر این اساس داده ها را کنترل می کند.
// Show the UI with your hosted webpage
figma.showUI(
''
);
// Listen for messages from the UI
figma.ui.onmessage = async (msg) => {
if (msg.type === "fetch-result") {
// Handle the successful response
console.log("Data received:", msg.data);
// Do something with the data in your plugin
// For example, create text nodes with the data:
await figma.loadFontAsync({ family: "Inter", style: "Regular" });
const textNode = figma.createText();
textNode.characters = JSON.stringify(msg.data, null, 2);
textNode.x = 100;
textNode.y = 100;
figma.currentPage.appendChild(textNode);
// Optional: close the plugin when done
figma.closePlugin();
} else if (msg.type === "fetch-error") {
// Handle errors
console.error("Error fetching data:", msg.error);
figma.notify(`Error: ${msg.error}`);
}
};
حتماً دامنه خود را به allowedDomains در پرونده مانیفست شما.
{
"name": "Your Plugin Name",
"id": "your-plugin-id",
"api": "1.0.0",
"main": "code.js",
"editorType": ["figma"],
"networkAccess": {
"allowedDomains": ["https://your-webpage-domain.com"]
}
}
به یاد داشته باشید ، سیاست های CORS هنوز هم اعمال می شود ، حتی در منشاء غیر تهی شما. اگر API را کنترل می کنید ، می توانید منشأ مجاز را تنظیم کنید تا دامنه میزبان فایل HTML استاتیک خود را مطابقت دهد. اما اگر API را کنترل نکنید ، می توانید از پروکسی CORS مانند CorsFix استفاده کنید. CorsFix داده ها را از طرف شما واکشی می کند و هدرهای CORS صحیح را به پاسخ اضافه می کند.
پایان
تماس با API از افزونه FIGMA به اندازه درخواست یک وب سایت معمولی ساده نیست. Iframe که با منشاء تهی در حال اجرا است دلیل اصلی ایجاد خطاهای CORS است. با استفاده از یک iframe مبدأ غیر تهی برای رسیدگی به درخواست های شبکه و استفاده postMessage برای ارسال داده ها ، می توانید این مشکل را دور بزنید.
اگر با API کار می کنید ، کنترل نمی کنید ، استفاده از CorsFix می تواند به شما در خطاهای CORS کمک کند. شروع کار رایگان است و شما فقط هنگام رفتن به تولید باید ارتقا دهید.
اسناد ادغام افزونه CorsFix FIGMA و مثال کامل کد را بررسی کنید.
