تلاش برای استفاده از fetch و غیرفعال کردن CORS

در تلاش هستید تا از طریق fetch به آدرس http://catfacts-api.appspot.com/api/facts?number=99 دسترسی پیدا کنید و می‌خواهید CORS را غیرفعال کنید. این در حالی است که از Postman بدون مشکل به این آدرس دسترسی دارید و در حال استفاده از create-react-app هستید.

مشکل اصلی این است که مرورگرها به طور پیش‌فرض از دسترسی کدهای JavaScript فرانت‌اند به منبعی در دامنه دیگر جلوگیری می‌کنند، مگر آنکه پاسخ دریافتی شامل هدر Access-Control-Allow-Origin باشد. در صورتی که این هدر وجود نداشته باشد، شما نمی‌توانید به محتوای پاسخ در سمت مشتری دسترسی پیدا کنید. استفاده از گزینه { mode: 'no-cors' } در fetch به هیچ وجه مشکل شما را حل نخواهد کرد؛ در واقع، این گزینه به مرورگر می‌گوید که نباید دسترسی به محتوای پاسخ را امکان‌پذیر کند و بدین ترتیب، به هیچ وجه نتایج مورد نظر شما را به‌دست نخواهید آورد.

به عنوان یک راه‌حل، پیشنهاد می‌شود از یک پروکسی CORS استفاده کنید. این پروکسی درخواست شما را به آدرس مورد نظر منتقل می‌کند و هدرهای CORS مورد نیاز را به پاسخ اضافه می‌کند. به عنوان مثال، می‌توانید از CORS Anywhere استفاده کنید که راه‌اندازی آن در چند دقیقه انجام‌پذیر است. کافی است دستورات زیر را در ترمینال اجرا کنید تا برنامه خود را راه‌اندازی کنید:

      git clone https://github.com/Rob--W/cors-anywhere.git
cd cors-anywhere/
npm install
heroku create
git push heroku master

    

پس از راه‌اندازی، درخواست شما به شکل زیر خواهد بود:

      https://your-proxy-url/https://catfacts-api.appspot.com/api/facts?number=99

    

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

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

به یاد داشته باشید که غیرفعال کردن CORS به‌طور محلی تنها برای شما امکان‌پذیر است و سایر کاربران با همین مشکل مواجه خواهند شد. اگر شما مجبور به تغییرات در سمت سرور هستید، می‌توانید از کتابخانه cors در Express استفاده کنید. در این حالت کافی است این بسته را نصب کرده و به پروژه خود اضافه کنید:

      const cors = require('cors');
app.use(cors());

    

به طور کلی، بهترین راه‌حل استفاده از پروکسی است، به ویژه زمانی که به یک API خارجی دسترسی دارید که هدر لازم را ندارد.