این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

واکشی API

این کد لبه بخشی از دوره آموزشی Developing Progressive Web Apps است که توسط تیم آموزشی Google Developers ایجاد شده است. اگر به ترتیب روی کدها کار کنید، بیشترین ارزش را از این دوره خواهید گرفت.

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

مقدمه

این آزمایشگاه شما را با استفاده از Fetch API ، یک رابط ساده برای واکشی منابع و بهبودی نسبت به XMLHttpRequest API راهنمایی می کند.

چیزی که یاد خواهید گرفت

نحوه استفاده از Fetch API برای درخواست منابع
نحوه ایجاد درخواست های GET، HEAD و POST با واکشی
نحوه خواندن و تنظیم هدرهای سفارشی
استفاده و محدودیت های CORS

آنچه شما باید بدانید

جاوا اسکریپت و HTML پایه
آشنایی با مفهوم و سینتکس اولیه ES2015 Promises

آنچه شما نیاز خواهید داشت

کامپیوتر با دسترسی ترمینال/پوسته
اتصال به اینترنت
مرورگری که از Fetch پشتیبانی می کند
یک ویرایشگر متن
گره و npm

توجه: اگرچه Fetch API در حال حاضر در همه مرورگرها پشتیبانی نمی‌شود ، یک polyfill وجود دارد.

مخزن pwa-training-labs را از github دانلود یا کلون کنید و در صورت نیاز نسخه LTS Node.js را نصب کنید.

خط فرمان کامپیوتر خود را باز کنید. به دایرکتوری fetch-api-lab/app/ بروید و یک سرور توسعه محلی راه اندازی کنید:

cd fetch-api-lab/app
npm install
node server.js

شما می توانید سرور را در هر زمان با Ctrl-c خاتمه دهید.

مرورگر خود را باز کنید و به localhost:8081/ بروید. شما باید صفحه ای با دکمه هایی برای درخواست ها ببینید (هنوز کار نمی کنند).

توجه: همه سرویس‌کاران را لغو ثبت کنید و تمام کش‌های سرویس‌کار را برای لوکال هاست پاک کنید تا با آزمایشگاه تداخل نداشته باشند. در Chrome DevTools، می‌توانید با کلیک کردن بر روی پاک کردن داده‌های سایت از بخش پاک کردن فضای ذخیره‌سازی تب Application به این مهم دست یابید.

پوشه fetch-api-lab/app/ را در ویرایشگر متن دلخواه خود باز کنید. app/ پوشه جایی است که آزمایشگاه را می سازید.

این پوشه شامل:

echo-servers/ حاوی فایل هایی است که برای اجرای سرورهای آزمایشی استفاده می شود
examples/ شامل منابع نمونه ای است که ما در آزمایش واکشی استفاده می کنیم
js/main.js جاوا اسکریپت اصلی برنامه است و جایی است که همه کدهای خود را می نویسید.
index.html صفحه اصلی HTML برای نمونه سایت/برنامه ما است
package-lock.json و package.json فایل های پیکربندی برای سرور توسعه ما و وابستگی های سرور اکو هستند
server.js یک سرور توسعه گره است

Fetch API یک رابط نسبتا ساده دارد. این بخش نحوه نوشتن یک درخواست اولیه HTTP با استفاده از fetch را توضیح می دهد.

یک فایل JSON واکشی کنید

در js/main.js ، دکمه Fetch JSON برنامه به تابع fetchJSON متصل است.

برای درخواست فایل examples/animals.json و ثبت پاسخ، تابع fetchJSON به روز کنید:

function fetchJSON() {
  fetch('examples/animals.json')
    .then(logResult)
    .catch(logError);
}

اسکریپت را ذخیره کنید و صفحه را تازه کنید. روی Fetch JSON کلیک کنید. کنسول باید پاسخ واکشی را ثبت کند.

توضیح

متد fetch مسیر منبعی را که می خواهیم به عنوان پارامتر بازیابی کنیم، در این مورد examples/animals.json می پذیرد. fetch وعده ای را برمی گرداند که به یک شی Response حل می شود. اگر وعده حل شود، پاسخ به تابع logResult ارسال می شود. اگر وعده رد شود، catch می گیرد و خطا به تابع logError منتقل می شود.

اشیاء پاسخ نشان دهنده پاسخ به یک درخواست هستند. آنها حاوی بدن پاسخ و همچنین خواص و روش های مفید هستند.

تست پاسخ های نامعتبر

پاسخ ثبت شده در کنسول را بررسی کنید. به مقادیر ویژگی های status ، url و ok توجه کنید.

منبع examples/animals.json را در fetchJSON با examples/non-existent.json جایگزین کنید. تابع fetchJSON به روز شده اکنون باید به شکل زیر باشد:

function fetchJSON() {
  fetch('examples/non-existent.json')
    .then(logResult)
    .catch(logError);
}

اسکریپت را ذخیره کنید و صفحه را تازه کنید. دوباره روی Fetch JSON کلیک کنید تا این منبع موجود را واکشی کنید.

توجه داشته باشید که واکشی با موفقیت انجام شد و بلوک catch فعال نکرد. اکنون ویژگی های status ، URL و ok پاسخ جدید را پیدا کنید.

مقادیر باید برای دو فایل متفاوت باشد (می دانید چرا؟). اگر خطای کنسول دارید، آیا مقادیر با زمینه خطا مطابقت دارند؟

توضیح

چرا پاسخ ناموفق بلوک catch را فعال نکرد؟ این یک نکته مهم برای واکشی و وعده‌ها است - پاسخ‌های بد (مانند 404s) هنوز برطرف می‌شوند! یک وعده واکشی تنها در صورتی رد می‌شود که درخواست قادر به تکمیل نباشد، بنابراین همیشه باید اعتبار پاسخ را بررسی کنید. در بخش بعدی پاسخ ها را تایید می کنیم.

برای اطلاعات بیشتر

اشیاء پاسخ

اعتبار پاسخ را بررسی کنید

برای بررسی اعتبار پاسخ ها باید کد خود را به روز کنیم.

در main.js ، یک تابع برای اعتبارسنجی پاسخ ها اضافه کنید:

function validateResponse(response) {
  if (!response.ok) {
    throw Error(response.statusText);
  }
  return response;
}

سپس کد زیر را جایگزین fetchJSON کنید:

function fetchJSON() {
  fetch('examples/non-existent.json')
    .then(validateResponse)
    .then(logResult)
    .catch(logError);
}

اسکریپت را ذخیره کنید و صفحه را تازه کنید. روی Fetch JSON کلیک کنید. کنسول رو چک کن اکنون پاسخ برای examples/non-existent.json باید بلوک catch فعال کند.

examples/non-existent.json را در تابع fetchJSON با examples/animals.json اصلی جایگزین کنید. تابع به روز شده اکنون باید به شکل زیر باشد:

function fetchJSON() {
  fetch('examples/animals.json')
    .then(validateResponse)
    .then(logResult)
    .catch(logError);
}

اسکریپت را ذخیره کنید و صفحه را تازه کنید. روی Fetch JSON کلیک کنید. باید ببینید که پاسخ مانند قبل با موفقیت ثبت شده است.

توضیح

اکنون که چک validateResponse را اضافه کرده‌ایم، پاسخ‌های بد (مانند 404s) یک خطا ایجاد می‌کنند و catch می‌گیرد. این به ما امکان می دهد پاسخ های ناموفق را مدیریت کنیم و از انتشار پاسخ های غیرمنتظره در زنجیره واکشی جلوگیری می کند.

پاسخ را بخوانید

پاسخ‌های واکشی به‌عنوان ReadableStreams ( مشخصات جریان‌ها ) نشان داده می‌شوند و برای دسترسی به بدنه پاسخ باید خوانده شوند. اشیاء پاسخ متدهایی برای انجام این کار دارند.

در main.js ، یک تابع readResponseAsJSON با کد زیر اضافه کنید:

function readResponseAsJSON(response) {
  return response.json();
}

سپس تابع fetchJSON با کد زیر جایگزین کنید:

function fetchJSON() {
  fetch('examples/animals.json') // 1
  .then(validateResponse) // 2
  .then(readResponseAsJSON) // 3
  .then(logResult) // 4
  .catch(logError);
}

اسکریپت را ذخیره کنید و صفحه را تازه کنید. روی Fetch JSON کلیک کنید. کنسول را بررسی کنید تا ببینید JSON از examples/animals.json در حال ثبت است (به جای شی Response).

توضیح

بیایید مرور کنیم که چه اتفاقی می افتد.

مرحله 1. Fetch در یک منبع، examples/animals.json فراخوانی می شود. Fetch وعده ای را برمی گرداند که به یک شی Response حل می شود. وقتی وعده حل شد، شی پاسخ به validateResponse ارسال می شود.

مرحله 2. validateResponse بررسی می کند که آیا پاسخ معتبر است (آیا 200 است؟). اگر اینطور نیست، خطایی ایجاد می‌شود، از بقیه بلوک‌های then صرفنظر می‌شود و بلوک catch فعال می‌شود. این امر به ویژه مهم است. بدون این بررسی، پاسخ‌های بد به زنجیره منتقل می‌شوند و ممکن است کدهای بعدی را که ممکن است متکی به دریافت پاسخ معتبر باشد، بشکنند. اگر پاسخ معتبر باشد، به readResponseAsJSON ارسال می شود.

مرحله 3. readResponseAsJSON بدنه پاسخ را با استفاده از متد Response.json() می خواند. این روش یک وعده را برمی گرداند که به JSON حل می شود. پس از رفع این وعده، داده های JSON به logResult ارسال می شود. (اگر وعده response.json() رد شود، بلوک catch راه اندازی می شود.)

مرحله 4. در نهایت، داده های JSON از درخواست اصلی به examples/animals.json توسط logResult ثبت می شود.

برای اطلاعات بیشتر

واکشی به JSON محدود نمی شود. در این مثال ما یک تصویر واکشی می کنیم و آن را به صفحه اضافه می کنیم.

در main.js یک تابع showImage با کد زیر بنویسید:

function showImage(responseAsBlob) {
  const container = document.getElementById('img-container');
  const imgElem = document.createElement('img');
  container.appendChild(imgElem);
  const imgUrl = URL.createObjectURL(responseAsBlob);
  imgElem.src = imgUrl;
}

سپس یک تابع readResponseAsBlob اضافه کنید که پاسخ ها را به صورت Blob می خواند:

function readResponseAsBlob(response) {
  return response.blob();
}

تابع fetchImage با کد زیر به روز کنید:

function fetchImage() {
  fetch('examples/fetching.jpg')
    .then(validateResponse)
    .then(readResponseAsBlob)
    .then(showImage)
    .catch(logError);
}

اسکریپت را ذخیره کنید و صفحه را تازه کنید. روی Fetch image کلیک کنید. شما باید یک سگ شایان ستایش را ببینید که یک چوب را در صفحه می آورد (این یک شوخی است!).

توضیح

در این مثال یک تصویر در حال واکشی است، examples/fetching.jpg . درست مانند تمرین قبلی، پاسخ با validateResponse تایید می شود. سپس پاسخ به صورت Blob خوانده می شود (به جای JSON مانند بخش قبل). یک عنصر تصویر ایجاد می‌شود و به صفحه اضافه می‌شود، و ویژگی src تصویر روی یک URL داده‌ای تنظیم می‌شود که نشان‌دهنده Blob است.

توجه: متد createObjectURL() شی URL برای تولید URL داده ای که نشان دهنده Blob است استفاده می شود. این مهم است که توجه داشته باشید. شما نمی توانید منبع تصویر را مستقیماً روی Blob تنظیم کنید. Blob باید به URL داده تبدیل شود.

برای اطلاعات بیشتر

این بخش یک چالش اختیاری است.

تابع fetchText را به روز کنید

واکشی /examples/words.txt
پاسخ را با validateResponse تایید کنید
پاسخ را به صورت متن بخوانید (اشاره: Response.text() را ببینید)
و متن را در صفحه نمایش دهید

می توانید از این تابع showText به عنوان کمکی برای نمایش متن نهایی استفاده کنید:

function showText(responseAsText) {
  const message = document.getElementById('message');
  message.textContent = responseAsText;
}

اسکریپت را ذخیره کنید و صفحه را تازه کنید. روی Fetch text کلیک کنید. اگر fetchText به درستی پیاده سازی کرده اید، باید متن اضافه شده را در صفحه مشاهده کنید.

توجه: اگرچه ممکن است واکشی HTML و اضافه کردن آن با استفاده از ویژگی innerHTML وسوسه انگیز باشد، مراقب باشید. این می تواند سایت شما را در معرض حملات اسکریپت بین سایتی قرار دهد!

برای اطلاعات بیشتر

Response.text()

به طور پیش فرض، واکشی از متد GET استفاده می کند که یک منبع خاص را بازیابی می کند. اما واکشی می تواند از سایر روش های HTTP نیز استفاده کند.

درخواست HEAD کنید

تابع headRequest را با کد زیر جایگزین کنید:

function headRequest() {
  fetch('examples/words.txt', {
    method: 'HEAD'
  })
  .then(validateResponse)
  .then(readResponseAsText)
  .then(logResult)
  .catch(logError);
}

اسکریپت را ذخیره کنید و صفحه را تازه کنید. روی درخواست HEAD کلیک کنید. توجه داشته باشید که محتوای متن ثبت شده خالی است.

توضیح

متد fetch می تواند دومین پارامتر اختیاری، init دریافت کند. این پارامتر پیکربندی درخواست واکشی را فعال می‌کند، مانند روش درخواست ، حالت حافظه پنهان، اعتبارنامه‌ها و موارد دیگر .

در این مثال، با استفاده از پارامتر init ، متد درخواست واکشی را روی HEAD قرار دادیم. درخواست‌های HEAD درست مانند درخواست‌های GET هستند، با این تفاوت که متن پاسخ خالی است. این نوع درخواست زمانی قابل استفاده است که تمام چیزی که می خواهید ابرداده در مورد یک فایل است اما نیازی به انتقال تمام داده های فایل ندارید.

اختیاری: اندازه یک منبع را بیابید

برای تعیین اندازه فایل، اجازه دهید به سرصفحه‌های پاسخ واکشی برای examples/words.txt نگاه کنیم.

تابع headRequest را به‌روزرسانی کنید تا ویژگی content-length headers پاسخ را ثبت کنید (نکته: مستندات سرصفحه‌ها و روش دریافت را ببینید).

پس از به روز رسانی کد، فایل را ذخیره کرده و صفحه را Refresh کنید. روی درخواست HEAD کلیک کنید. کنسول باید اندازه examples/words.txt را (بر حسب بایت) ثبت کند.

توضیح

در این مثال، روش HEAD برای درخواست اندازه (بر حسب بایت) یک منبع (که در سربرگ content-length نشان داده شده است) بدون بارگیری واقعی خود منبع استفاده می شود. در عمل می توان از این برای تعیین اینکه آیا منبع کامل باید درخواست شود (یا حتی نحوه درخواست آن) استفاده می شود.

اختیاری : اندازه examples/words.txt را با استفاده از روش دیگری بیابید و تأیید کنید که با مقدار سرصفحه پاسخ مطابقت دارد (می‌توانید نحوه انجام این کار را برای سیستم عامل خاص خود جستجو کنید - امتیازهای جایزه برای استفاده از خط فرمان!).

برای اطلاعات بیشتر

Fetch همچنین می‌تواند داده‌ها را با درخواست‌های POST ارسال کند.

یک سرور اکو راه اندازی کنید

برای این مثال باید یک سرور اکو را اجرا کنید. از دایرکتوری fetch-api-lab/app/ دستور زیر را اجرا کنید (اگر خط فرمان توسط سرور localhost:8081 مسدود شده است، یک پنجره یا تب جدید خط فرمان را باز کنید):

node echo-servers/cors-server.js

این دستور یک سرور ساده را در localhost:5000/ راه اندازی می کند که درخواست های ارسال شده به آن را بازتاب می دهد.

شما می توانید این سرور را در هر زمان با ctrl+c خاتمه دهید.

درخواست POST کنید

تابع postRequest را با کد زیر جایگزین کنید (مطمئن شوید که تابع showText را از بخش 4 تعریف کرده اید اگر بخش را کامل نکرده اید):

function postRequest() {
  fetch('http://localhost:5000/', {
    method: 'POST',
    body: 'name=david&message=hello'
  })
    .then(validateResponse)
    .then(readResponseAsText)
    .then(showText)
    .catch(logError);
}

اسکریپت را ذخیره کنید و صفحه را تازه کنید. روی ارسال درخواست کلیک کنید. به درخواست ارسالی که در صفحه منعکس شده است توجه کنید. باید حاوی نام و پیام باشد (توجه داشته باشید که هنوز اطلاعاتی از فرم دریافت نمی کنیم).

توضیح

برای ایجاد یک درخواست POST با fetch، از پارامتر init برای تعیین متد استفاده می کنیم (مشابه نحوه تنظیم متد HEAD در قسمت قبل). این همان جایی است که بدنه درخواست را تنظیم می کنیم، در این مورد یک رشته ساده. بدنه داده‌ای است که می‌خواهیم ارسال کنیم.

توجه: در تولید، به یاد داشته باشید که همیشه اطلاعات حساس کاربر را رمزگذاری کنید.

هنگامی که داده ها به عنوان یک درخواست POST به localhost:5000/ ارسال می شود، درخواست به عنوان پاسخ بازتاب داده می شود. سپس پاسخ با validateResponse تایید می شود، به صورت متن خوانده می شود و در صفحه نمایش داده می شود.

در عمل، این سرور یک API شخص ثالث را نشان می دهد.

اختیاری: از رابط FormData استفاده کنید

می توانید از رابط FormData برای گرفتن آسان داده ها از فرم ها استفاده کنید.

در تابع postRequest ، یک شی FormData جدید را از عنصر فرم msg-form نمونه سازی کنید:

const formData = new FormData(document.getElementById('msg-form'));

سپس مقدار پارامتر body را با متغیر formData جایگزین کنید.

اسکریپت را ذخیره کنید و صفحه را تازه کنید. فرم (فیلدهای نام و پیام ) را در صفحه پر کنید و سپس روی ارسال درخواست کلیک کنید. به محتوای فرم نمایش داده شده در صفحه توجه کنید.

توضیح

سازنده FormData می تواند یک form HTML بگیرد و یک شی FormData ایجاد کند. این شی با کلیدها و مقادیر فرم پر شده است.

برای اطلاعات بیشتر

یک سرور اکو غیر cors راه اندازی کنید

سرور قبلی اکو را متوقف کنید (با فشار دادن ctrl+c از خط فرمان) و با اجرای دستور زیر یک echo server جدید را از پوشه fetch-lab-api/app/ راه اندازی کنید:

node echo-servers/no-cors-server.js

این دستور یک سرور اکو ساده دیگر را راه اندازی می کند، این بار در localhost:5001/ . با این حال، این سرور برای پذیرش درخواست های متقاطع پیکربندی نشده است.

واکشی از سرور جدید

اکنون که سرور جدید در localhost:5001/ اجرا می‌شود، می‌توانیم یک درخواست واکشی برای آن ارسال کنیم.

تابع postRequest را برای واکشی از localhost:5001/ به جای localhost:5000/ به روز کنید. پس از به‌روزرسانی کد، فایل را ذخیره کنید، صفحه را بازخوانی کنید و سپس روی POST Request کلیک کنید.

شما باید یک خطا در کنسول دریافت کنید که نشان می دهد درخواست متقاطع مسدود شده است زیرا سرصفحه CORS Access-Control-Allow-Origin وجود ندارد.

fetch در تابع postRequest با کد زیر به‌روزرسانی کنید، که از حالت no-cors استفاده می‌کند (همانطور که گزارش خطا نشان می‌دهد)، و تماس‌های validateResponse و readResponseAsText حذف می‌کند (توضیح زیر را ببینید):

function postRequest() {
  const formData = new FormData(document.getElementById('msg-form'));
  fetch('http://localhost:5001/', {
    method: 'POST',
    body: formData,
    mode: 'no-cors'
  })
    .then(logResult)
    .catch(logError);
}

اسکریپت را ذخیره کنید و صفحه را تازه کنید. سپس فرم پیام را پر کنید و روی POST Request کلیک کنید.

شی پاسخ ثبت شده در کنسول را مشاهده کنید.

توضیح

واکشی (و XMLHttpRequest) از خط مشی مبدا یکسان پیروی می کند. این بدان معنی است که مرورگرها درخواست های HTTP با منبع متقابل را از داخل اسکریپت ها محدود می کنند. درخواست متقاطع زمانی اتفاق می‌افتد که یک دامنه (به عنوان مثال http://foo.com/ ) منبعی را از یک دامنه جداگانه (مثلا http://bar.com/ ) درخواست کند.

توجه: محدودیت های درخواست متقاطع اغلب یک نقطه سردرگمی است. بسیاری از منابع مانند تصاویر، شیوه نامه ها و اسکریپت ها در سراسر دامنه ها (به عنوان مثال، منبع متقابل) واکشی می شوند. با این حال، اینها استثناهایی از سیاست مبدا یکسان هستند. درخواست‌های مبدأ متقابل هنوز از داخل اسکریپت‌ها محدود می‌شوند.

از آنجایی که سرور برنامه ما دارای شماره پورت متفاوتی نسبت به دو سرور اکو است، درخواست‌ها به هر یک از سرورهای اکو منبع متقابل در نظر گرفته می‌شوند. با این حال، اولین سرور اکو، که در localhost:5000/ اجرا می‌شود، برای پشتیبانی از CORS پیکربندی شده است (می‌توانید echo-servers/cors-server.js را باز کنید و پیکربندی را بررسی کنید). سرور جدید اکو، که روی localhost:5001/ اجرا می‌شود، نیست (به همین دلیل با خطا مواجه می‌شویم).

استفاده از mode: no-cors امکان واکشی یک پاسخ غیر شفاف را فراهم می کند. این اجازه می دهد تا پاسخ را دریافت کنید، اما از دسترسی به پاسخ با جاوا اسکریپت جلوگیری می کند (به همین دلیل است که نمی توانیم validateResponse ، readResponseAsText یا showResponse استفاده کنیم). پاسخ همچنان می تواند توسط API های دیگر مصرف شود یا توسط یک سرویس دهنده ذخیره شود.

هدر درخواست را اصلاح کنید

Fetch همچنین از تغییر هدر درخواست پشتیبانی می کند. سرور اکو localhost:5001 (بدون CORS) را متوقف کنید و سرور اکو localhost:5000 (CORS) را از بخش 6 راه اندازی مجدد کنید:

node echo-servers/cors-server.js

بازیابی نسخه قبلی تابع postRequest که از localhost:5000/ واکشی می شود:

function postRequest() {
  const formData = new FormData(document.getElementById('msg-form'));
  fetch('http://localhost:5000/', {
    method: 'POST',
    body: formData
  })
    .then(validateResponse)
    .then(readResponseAsText)
    .then(showText)
    .catch(logError);
}

اکنون از رابط Header برای ایجاد یک شی Header در داخل تابع postRequest به نام messageHeaders با هدر Content-Type برابر با application/json استفاده کنید.

سپس ویژگی headers شی init را به عنوان متغیر messageHeaders تنظیم کنید.

ویژگی body را به‌روزرسانی کنید تا یک شیء JSON رشته‌دار باشد، مانند:

JSON.stringify({ lab: 'fetch', status: 'fun' })

پس از به روز رسانی کد، فایل را ذخیره کرده و صفحه را Refresh کنید. سپس روی POST Request کلیک کنید.

توجه داشته باشید که درخواست بازتاب داده شده اکنون دارای یک Content-Type of application/json است (برخلاف multipart/form-data که قبلاً داشت).

اکنون یک هدر Content-Length سفارشی به شی messageHeaders اضافه کنید و به درخواست یک اندازه دلخواه بدهید.

پس از به‌روزرسانی کد، فایل را ذخیره کنید، صفحه را تازه‌سازی کنید و روی POST Request کلیک کنید. توجه داشته باشید که این هدر در درخواست بازتابی اصلاح نشده است.

توضیح

رابط Header ایجاد و اصلاح اشیاء Header را امکان پذیر می کند. برخی از سرصفحه ها مانند Content-Type را می توان با واکشی تغییر داد. موارد دیگر، مانند Content-Length ، محافظت می شوند و نمی توان آنها را تغییر داد (به دلایل امنیتی).

هدر درخواست سفارشی را تنظیم کنید

Fetch از تنظیم هدرهای سفارشی پشتیبانی می کند.

هدر Content-Length را از شی messageHeaders در تابع postRequest حذف کنید. هدر سفارشی X-Custom با یک مقدار دلخواه اضافه کنید (به عنوان مثال ' X-CUSTOM': 'hello world' ).

اسکریپت را ذخیره کنید، صفحه را بازخوانی کنید و سپس روی POST Request کلیک کنید.

باید ببینید که درخواست تکرار شده دارای ویژگی X-Custom است که شما اضافه کرده اید.

حالا یک هدر Y-Custom به شی Headers اضافه کنید. اسکریپت را ذخیره کنید، صفحه را بازخوانی کنید و روی POST Request کلیک کنید.

شما باید خطای مشابه این را در کنسول دریافت کنید:

Fetch API cannot load http://localhost:5000/. Request header field y-custom is not allowed by Access-Control-Allow-Headers in preflight response.

توضیح

مانند درخواست های متقاطع، هدرهای سفارشی باید توسط سروری که منبع از آن درخواست شده است پشتیبانی شود. در این مثال، سرور اکو ما به گونه ای پیکربندی شده است که هدر X-Custom را بپذیرد اما هدر Y-Custom نمی پذیرد (شما می توانید echo-servers/cors-server.js را باز کنید و به دنبال Access-Control-Allow-Headers بگردید تا خودتان ببینید). هر زمان که یک هدر سفارشی تنظیم شود، مرورگر یک بررسی قبل از پرواز انجام می دهد. این بدان معنی است که مرورگر ابتدا یک درخواست OPTIONS را به سرور ارسال می کند تا مشخص کند چه روش ها و هدرهای HTTP توسط سرور مجاز است. اگر سرور به گونه ای پیکربندی شده باشد که متد و هدر درخواست اصلی را بپذیرد، ارسال می شود، در غیر این صورت یک خطا ایجاد می شود.

برای اطلاعات بیشتر

کد راه حل

برای دریافت یک کپی از کد کار، به پوشه راه حل بروید.

اکنون می دانید که چگونه از Fetch API استفاده کنید!

منابع

برای مشاهده تمامی کدهای دوره آموزشی PWA به کدلبورد خوش آمدگویی دوره مراجعه کنید/

واکشی API با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

مقدمه

چیزی که یاد خواهید گرفت

آنچه شما باید بدانید

آنچه شما نیاز خواهید داشت

یک فایل JSON واکشی کنید

توضیح

تست پاسخ های نامعتبر

توضیح

برای اطلاعات بیشتر

اعتبار پاسخ را بررسی کنید

توضیح

پاسخ را بخوانید

توضیح

برای اطلاعات بیشتر

توضیح

برای اطلاعات بیشتر

برای اطلاعات بیشتر

درخواست HEAD کنید

توضیح

اختیاری: اندازه یک منبع را بیابید

توضیح

برای اطلاعات بیشتر

یک سرور اکو راه اندازی کنید

درخواست POST کنید

توضیح

اختیاری: از رابط FormData استفاده کنید

توضیح

برای اطلاعات بیشتر

یک سرور اکو غیر cors راه اندازی کنید

واکشی از سرور جدید

توضیح

هدر درخواست را اصلاح کنید

توضیح

هدر درخواست سفارشی را تنظیم کنید

توضیح

برای اطلاعات بیشتر

کد راه حل

منابع

واکشی API