چگونه از ارور CORS در Vue خلاص شیم؟

فرض کن روز اولته نشستی پای پروژه، و از پروژه فرانت لوکال سیستمت میخای به بک اند یا هر سرویسی متصل کنی با استفاده از API. همین که یه درخواست http میدی به سرویس، همه چی میره تو دیوار :) کنسول میشه کارخونه رب گوجه سازی :)
احتمالا با این ارور توی کنسول مرورگر مواجه میشی:

Access to XMLHttpRequest at ‘http://api.back.end/data' from origin ‘http://localhost:8080/' has been blocked by CORS policy.

این یه کابوسه برای همه دولوپر ها. ولی خب چجوری از شرش خلاص شیم؟ قبل اینکه بریم سراغ راه حل توی vue بزارید اول این ارور رو از نزدیک بررسی کنیم.

ارور CORS چیه؟ چرا بهش بر میخوریم؟

این یک قانونه توی دنیای وب که بهش میگن same-origin یعنی اینکه وب اپلیکیشن ها و سرویس ها باید درخواست های http شون از یکجا باشه. مثلا از یک endpoint یا origin. ولی ما بیشتر مواقع کلاینت ها (فرانت) و سرویس هامون(بک اند) روی یک سرور با origin مشخصی الزاما نیستند، و هر کدوم endpoint منحصر به فرد خودشو داره. در نهایت باعث میشه که به ارور CORS بخوریم.

البته میتونید توی بک اند header ست کنید که این مشکل برطرف شه. شما همچنین میتونید از این لینک اطلاعات بیشتری رو کسب کنید Cross-Origin Resource Sharing (CORS).

به عنوان مثال من پروژه Vuejs رویlocalhost اجرا کرده بودم، و API یا همون بک اند روی سرور واقعی یجای توی این کره خاکی بودش :) همونطور که میتونید حدس بزنید. اینها از origin های مختلفی بودند و این کاملا مخالف با قانون same-origin بود. و اینکه من اصلا دسترسی نداشتم به بک اند که header ست کنم.

خب حالا چجوری ارور CORS رو حل و فصل کنیم؟ (البته توی Vue)

خوب همونجو که میدونید ما باید قانون same-origin رو پیاده کنیم. خوشبختانه داداشمون اقای Vue CLI این کارو برای ما راحت کرده. به عنوان مثال پروژه من روی این آدرسlocalhost:8080 هست، و هنگام توسعه من میخاستم که پروکسی کنم درخواست های http رو به بک اند (که از یه origin بنظر برسن)

برای این کار ما باید ادرس پروکسی رو توی این فایل vue.config.jsقرار بدیم. اگر این فایل توی روت پروژه نبود میتونید خیلی راحت ایجادش کنید. به این شکل:

// vue.config.js 
module.exports = {   
   // options... 
}

توی بلاک module.exportsمیتونید یه ابجکت اضافه کنید به نامdevServer چون که ما میخایم برای درخواست های http به سمت API پروکسی شه حین توسعه و اجرا کلاینت روی localhost.

به این شکل:

// vue.config.js
module.exports = {
  devServer: {
        proxy: 'http://api.back.end',
    }
}

به این سادگی و خوشمزگی :)

برای اینکه تغییرات اعمال بشه، سرور کلاینت رو ببندید بعد دوباره اجرا کنید که تغییرات اعمال بشه به کلاینت.

تمام کانفیگ های که میتونید توی این فایل انجام بدید برای Vue میتونید اینجا پیدا کنید Vue configurations.

اگر که موقتی خواستید از شر CORS خلاص شید، خیلی ساده میتونید این پلاگین روی مرورگر Chrome خودتون نصب کنید CORS Unblock

همچنین میتونید من رو توی medium و dev.to دنبال کنید.

dev.to/alirezahamid و medium.com/@alirezahamid