خطای CORS چیه و چه طوری مشکل خطای CORS و تو ریاکت هندل کنیم؟

Рет қаралды 548

Күн бұрын

کلمه CORS مخفف یک مفهوم امنیتی مهم در وب است. در این ویدیو، به زبانی ساده توضیح می‌دهیم که CORS چیست و چطور می‌توانید آن را در پروژه‌های React خود مدیریت کنید. ابتدا درباره Origin صحبت می‌کنیم و توضیح می‌دهیم که Origin چیست. سپس به مکانیزم مرورگرها برای Cross-Origin Requests می‌پردازیم و نحوه کار آن را توضیح می‌دهیم.
همچنین نشان می‌دهیم که با دیپلوی کردن بک‌اند و فرانت‌اند روی یک Origin، هم سرعت سایت بیشتر می‌شود و هم پیچیدگی نرم‌افزار کمتر می‌شود. اگر در حالت توسعه (لوکال) با خطای CORS مواجه شدید، می‌توانید از افزونه مرورگر CORS Unblock یا قابلیت Proxy در ابزارها و فریمورک‌های Create React App، Remix، Vite، و Next.js استفاده کنید.
در انتها چند مثال عملی از وب‌سایت‌هایی که بک‌اند و فرانت‌اندشان جدا هستند و سرعت‌شان به خاطر درخواست‌های Options کمتر است، ارائه می‌دهیم. همچنین، توییتر را به عنوان مثالی نشان می‌دهیم که بک و فرانت را در یک جا دیپلوی کرده‌اند و به همین دلیل Preflight Request ندارند. با ما همراه باشید تا راهکارهای ساده و کاربردی برای مدیریت CORS را یاد بگیرید!
اکستشن CORS UNBLOCK برای کروم:
chromewebstore.google.com/det...
اکستشن CORS UNBLOCK برای فایرفاکس:
addons.mozilla.org/en-US/fire...
00:00 - مقدمه
0:46 - خطای CORS چیه و چرا وجود داره
2:51 - چرا CORS سرعت api رو کم میکنه
3:30 - origin یعنی چی؟
4:22 - چه طوری کلا CORS رو حذف کنیم که سرعت بیشتر بشه و خطا نده
6:17 - فرانت اند و بک‌اند و کنار هم دیپلوی کنیم چه مزیتی داره
7:09 - حل مشکل CORS در محیط development
8:12 - پروکسی (proxy) چه طوری مشکل رو حل میکنه
9:22 - سایت های و سیستم های استاندارد CORS و چه طوری هندل میکنن!
10:14 - اگر CORS چک داشته باشیم و جدا دیپلوی کنیم چی میشه!
11:32 - نصب اکستنشن برای حل مشکل CORS
12:45 - کانفیگ پروکسی در react (پروژه های CRA - create react app)
15:04 - کانفیگ پروکسی در vite (ویت)
16:01 - کانفیگ پروکسی در Nextjs (نکست جی اس)
17:22 - جمع بندی و پایان
Website: react.ir
Twitter: / react_ir
Instagerm: / react_ir
Telegram: t.me/react_ir
Personal Twitter: / nima_arf
Personal Instagram: / nima_arf
Personal Github: github.com/nimaa77

Пікірлер: 29

@user-qh4es1iz4b Ай бұрын

نیما عالی دمتگرم، خیلی پر مغز بود

@benyamin4634 18 күн бұрын

ممنون و خسته نباشی نیما جان

@nima_arf 18 күн бұрын

خواهش میکنم موفق باشید

@mahdishariflo1851 Ай бұрын

خسته نباشی

@nima_arf Ай бұрын

مرسی مرسی

@emranrastadi6219 Ай бұрын

سلام سلام داداش اگه وقت ازاد گیر اوردی لطفا راجب یکی از اینا ( تست نویسی اصولی - امنیت در نکست - وظایف یک چپترلید ) ویدیو بگیرید لطفا - ممنونم

@nima_arf Ай бұрын

سلام بله حتما

@jt_javad Ай бұрын

دمت گرم محتوات به عمیق شدن توی این موضوعات خیلی کمک میکنه👍 دوتا نکته فقط پروتکل https پورتش ۴۴۳ است متد ریکوئست preflight هد نیست options فکر میکنم باشه

@nima_arf Ай бұрын

ایول که ویدیورو دیدی و دوسش داشتی و چه با دقتم دیدی 😍 بله درست میفرمایید اون https و بهش اشاره نکردم چون پیچیده میکرد اون preflight هم درست میفرمایید options هستش اون قسمت که اشتباه گفتمو همونجارو ویدیو ادیت کردم و ستاره گذاشتم روش نوشتم options

@mehdifada-yi5074 Ай бұрын

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

@nima_arf Ай бұрын

عه بازم کم بود؟ قسم اولش کم بود یا قسمت دومش؟

@mehdifada-yi5074 Ай бұрын

@@nima_arf جفتش کم بود ولی اول کم تر بود🙏

@babakkhosravi8489 Ай бұрын

مثل همیشه عالی👍🏻👏🏻❤️

@aminda6862 Ай бұрын

خیلی عالی ممنون خوب میشه که کلا دیپلوی اپ های فرانتی رو هم روی vps پوشش بدی نیما جان مثلا چجوری اپ هایی که با نکست یا ویت نوشتیم رو خودمون با کانفیگ درست روی vps شخصی دیپلوی کنیم

@nima_arf Ай бұрын

اره حتما، اینو براش برنامه دارم و توضیح میدم

@sheyda_arf Ай бұрын

👌🏼🔥

@alibayatmokhtari Ай бұрын

اگر فرض رو بر این بذاریم که بکند هم یه استیج واسه دولوپ داره و یه استیج دیگه پروداکشنش، این رو چطوری میشه کانفیگ کرد که واسه دولوپ روی یه چیزی پراکسی کنه و واسه پروداکشن روی یه چیز دیگه؟ مخصوصا توی روشی که برای CRA گفتی

@nima_arf Ай бұрын

میتونید براساس یه environment variable اون مقدار پروکسی و ست کنید البته باید یه فایل جدید بسازید پروکسی رو داخل اون بالا بیارید درکل کار خاصی نداره اینجا بیشتر توضیج دادن create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually

@sarazamani4914 Ай бұрын

🔥🔥🔥

@ghazaleniazi5855 Ай бұрын

🔥🔥🔥🔥

@alirezasoltan78 Ай бұрын

بالاخره بعد کلی انتظار ❤️‍🔥

@nima_arf Ай бұрын

🔥🔥 دیر رسیدن بهتر از هرگز نرسیدن است

@tahmasbtabar Ай бұрын

عالی و کاربردی🎉

@nima_arf Ай бұрын

😍🔥

@abba3261 Ай бұрын

اح اتریوم اومد پایین نفروختم حیف 😭 از شنبه برمیگردم ب کدنویسی

@nima_arf Ай бұрын

عیب نداره دنیا ۲ روزه

@S3niffer Ай бұрын

منو باش من app ام react عه بعد یه app next ساختم که کار همین proxy رو برام انجام بده من از react ریکوعست میزنم به app next بعد اون میزنه api اصلی بعد جوابشو برمیگردونه 🤣

@S3niffer Ай бұрын

البته بگما توی app next مجبور شدم با middleware همین cors رو برای همه orgin ها قابل قبول بزارم یعنی گذاشتم روی "*" نمیدونستم دیگه اینکارو کردم خیلی ممنون این ویدیو خیلی کمک کرد

@nima_arf Ай бұрын

یه پروکسی از اول ساختی 😂😂