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

کلمه 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 برای کروم:
https://chromewebstore.google.com/det...

اکستشن CORS UNBLOCK برای فایرفاکس:
https://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: https://react.ir
Twitter:   / react_ir  
Instagerm:   / react_ir  
Telegram: https://t.me/react_ir

Personal Twitter:   / nima_arf  
Personal Instagram:   / nima_arf  
Personal Github: https://github.com/nimaa77