چرا localhost هنوز باعث بروز خطای CORS میشود
شما فرانتاند خود را روی localhost:3000 اجرا میکنید. بکاند خود را روی localhost:5000 اجرا میکنید. هر دو اپلیکیشن روی لپتاپ شما هستند. با این حال، با خطای CORS مواجه میشوید.
این اتفاق به این دلیل میافتد که مرورگرها «منشأ» (origin) را چگونه تعریف میکنند.
یک origin از سه بخش تشکیل شده است:
- پروتکل (Protocol)
- دامنه (Domain)
- پورت (Port)
این دو مورد را مقایسه کنید:
آنها پروتکل یکسانی دارند. آنها دامنه یکسانی دارند. اما از پورتهای متفاوتی استفاده میکنند.
مرورگرها پورتهای متفاوت را به عنوان originهای متفاوت میبینند.
وقتی اپلیکیشن React شما API خود را فراخوانی میکند، مرورگر یک درخواست cross-origin را تشخیص میدهد. مرورگر آنها را دو موجودیت مجزا در نظر میگیرد.
چرا این قانون وجود دارد؟ امنیت.
اگر وبسایتها میتوانستند آزادانه هر API را فراخوانی کنند، یک سایت مخرب میتوانست:
- دادههای بانکی شما را بخواند.
- به APIهای خصوصی دسترسی پیدا کند.
- به جای شما اقدام کند.
مرورگرها از «سیاست منشأ یکسان» (Same-Origin Policy) برای جلوگیری از این کار استفاده میکنند. وبسایت A نمیتواند به وبسایت B دسترسی داشته باشد، مگر اینکه وبسایت B اجازه دهد.
CORS مخفف Cross-Origin Resource Sharing است. این روشی است که سرور شما به مرورگر میگوید: "من به درخواستهای رسیده از این origin خاص اعتماد دارم."
شما میتوانید این مشکل را با اضافه کردن یک هدر به بکاند خود حل کنید: Access-Control-Allow-Origin: http://localhost:3000
این کار به مرورگر میگوید که درخواست امن است.
یک نکته که معمولاً باعث سردرگمی میشود: شما میبینید که درخواست در لاگهای بکاند شما ثبت میشود، اما فرانتاند با خطا مواجه میشود.
این اتفاق به این دلیل میافتد که:
- فرانتاند درخواست را ارسال میکند.
- بکاند درخواست را با موفقیت دریافت میکند.
- بکاند پاسخ را با موفقیت ارسال میکند.
- مرورگر پاسخ را دریافت کرده و به دلیل قوانین امنیتی، آن را مسدود میکند.
این خطا در واقع یک ویژگی امنیتی مرورگر است.
ابزارهایی مانند Postman یا cURL به این دلیل کار میکنند که مرورگر نیستند. آنها سیاستهای امنیتی مرورگر را اعمال نمیکنند.
مرورگر این واقعیت را که هر دو اپلیکیشن روی سیستم شما هستند نادیده میگیرد. مرورگر فقط به origin اهمیت میدهد.