دریافت مشخصات صفحه وب از طریق API بدون مشکل CORS

با استفاده از این API می تونید مشخصات صفحات وب مثل عنوان، توضیحات، تصویر و حتی اسکرین شات صفحه را بدون مشکل CORS دریافت کنید. برای مثال این اطلاعات می تونه جهت پیش نمایش لینک ها یا پر کردن خودکار برخی از فرم ها استفاده بشه.رسانیکامنبع: https://rasanika.com

توی همین سایت از این سرویس برای پیش نمایش لینک ها موقع نگه داشتن ماوس روی لینک، استفاده شده.

تست آنلاین

پیش نمایش لینک ها رو به صورت آنلاین ببینید:

مشکل CORS چیست؟

مشکل و خطای CORS یا Cross-Origin Resource Sharing زمانی پیش میاد که توی مرورگر با استفاده از جاوا اسکریپت بخوایم یه درخواست HTTP ارسال کنیم به یه دامنه ای غیر از دامنه خودمون و اون دامنه هدر های لازم رو ارسال نکنه. در این صورت به خاطر مسائل امنیتی مرورگر درخواست ما رو بلاک می کنه و اجازه دسترسی نمیده.

مثلا فرض کنید توی سایت A بخوایم اطلاعات سایت B رو به کاربر نشون بدیم. در این صورت اگه مستقیما توی مرورگر درخواست HTTP به سایت B ارسال کنیم به احتمال زیاد با خطای CORS مواجه میشیم.

راه حل مشکل CORS

برای رفع خطای CORS می تونیم توی سرور و بک اند خودمون یه API بسازیم که آدرس صفحه مدنظر ما رو دریافت کنه و سمت سرور اطلاعات رو استخراج و به ما ارسال کنه. کدنویسی و راه اندازی چنین سیستمی طبیعتا زمان میبره مخصوصا اگه بخوایم قابلیت هایی مثل اجرای جاوا اسکریپت و تولید اسکرین شات بهش اضافه کنیم.

این API رو دقیقا من به همین خاطر طراحی کردم و کاملا رایگان و عمومی هست و اگه دوست داشتین می تونین ازش استفاده کنین.

قابلیت های این API

• رفع مشکل CORS

• تولید اسکرین شات از صفحه

• اجرای جاوا اسکریپت

• چندین روش مختلف جهت استخراج دیتا

• اطلاعات بیشتر مثل ریدایرکت، نویسنده، تاریخ و …

نحوه استفاده

یک درخواست GET به آدرس /api/w/metadata با پارامتر های مناسب در کوری استرینگ ارسال کنید.

مثلا دریافت مشخصات example.com به این صورت می باشد:

rasanika.com/api/w/metadata?page=example.com

آدرس و متد API

GET "https://rasanika.com/api/w/metadata"

پارامتر های ضروری

// آدرس صفحه ای که می خواهید مشخصاتش را دریافت نمایید
page: string;

پارامتر های اختیاری

// اجرای جاوااسکریپت صفحه
javascript: "on" | "off"; // پیشفرض: "on"

// نوع اسکرین شات تولید شده از صفحه
screenshot: "mobile" | "desktop" | "off"; // پیشفرض: "off"

ساختار خروجی JSON

{
  title: string | null;          // عنوان
  description: string | null;    // توضیحات
  image: string | null;          // آدرس تصویر
  favicon: string | null;        // آدرس آیکون
  author: string | null;         // نویسنده
  publishedTime: string | null;  // تاریخ انتشار
  modifiedTime: string | null;   // تاریخ ویرایش 
  screenshot: string | null;     // آدرس تصویر اسکرین شات
  redirectedTo: string | null;   // لینک صحیح درصورت ریدایرکت
}

مثال JavaScript

const url = new URL("https://rasanika.com/api/w/metadata");

url.searchParams.append("page", "https://example.com");
url.searchParams.append("screenshot", "mobile");

const { title, image } = await fetch(url).then(r => r.json());

اگه سوال یا پیشنهادی داشتید حتما در قسمت پرسش و پاسخ مطرح کنید.

ابزار مرتبط: