🎉 سال نو، مهارت نو، مشاوره رایگان نقشه راه برنامه نویسی (آفر ویژه ثبت نام قبل از افزایش قیمت 🔥)
۰ ثانیه
۰ دقیقه
۰ ساعت
۳ هادی قاسمیان قطب اباد
تنظییمات cors در لاراول 10 برای درخواست‌های axios از react
جامعه لاراول ایجاد شده در ۱۲ خرداد ۱۴۰۲

با سلام

می خواهم از طریق کتابخانه axios روی react یک درخواست get به لاراول 10 ارسال کنم. اما متاسفانه با خطای زیر رو به رو می‌شوم:

p://localhost/todo/laravel/public/api/test' from origin 'http://localhost:3000' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed.


لطفا راهنمایی کنید.

سلام هادی عزیز

این خطای CORS (Cross-Origin Resource Sharing) که دریافت می‌کنید، به این معناست که درخواستی که از مبدا متفاوتی (origin) به لاراول می‌فرستید، توسط سیاست‌های CORS محدود شده. این محدودیت‌ها به منظور امنیت برنامه‌های وب اعمال میشن.

برای حل این مشکل، شما باید تنظیمات CORS رو در لاراول تغییر بدید تا درخواست‌ها از مبدا مورد نظر شما (origin) قابل قبول باشن.

روش اول (تغییر تنظیمات فایل `.htaccess`):

۱. در پروژه لاراول، وارد پوشه `public` بشید.

۲. کدهای زیر را به فایل `.htaccess` اضافه کنید:

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
Header set Access-Control-Allow-Headers "Origin, Content-Type, Authorization"

این تنظیمات به سرور Apache میگه که سطح دسترسی مناسب رو برای درخواست‌ها از تمام مبداها قبول کنه. این تنظیمات رو باید با توجه به نیازهای امنیتی خود تغییر بدید.

روش دوم (استفاده از پکیج `barryvdh/laravel-cors`):

۱. از طریق Composer، پکیج `barryvdh/laravel-cors` رو نصب کنید.

composer require barryvdh/laravel-cors

۲. پرووایدر مربوط به CORS رو به فایل `config/app.php` اضافه کنید:

'providers' => [
  // ...
  Barryvdh\\Cors\\ServiceProvider::class,
];

۳. میدلور مربوط به CORS رو به فایل `app/Http/Kernel.php` اضافه کنید:

protected $middleware = [
  // ...
  \\Barryvdh\\Cors\\HandleCors::class,
];

۴.فایل تنظیمات `config/cors.php` رو ایجاد کنید

 و تنظیمات رو در اون قرار بدید. مثلاً:

return [
  'paths' => ['api/*'],
  'allowed_methods' => ['*'],
  'allowed_origins' => ['*'],
  'allowed_origins_patterns' => [],
  'allowed_headers' => ['*'],
  'exposed_headers' => [],
  'max_age' => 0,
  'supports_credentials' => false,
];

توجه داشته باشید که تنظیمات CORS رو مطابق نیاز خودتون تغییر بدید. برای اطلاعات بیشتر در مورد این پکیج، به مستندات رسمی آن مراجعه کنید.

احمدرضا فاطمی کیا ۱۲ خرداد ۱۴۰۲، ۰۸:۳۵

سلام

ممنونم. ولی من روی لوکال هاست و لاراول 10 دارم چک می‌کنم. موارد بالا مشکلم رو حل نکرد. مشروح سوال رو ایجا مطرح کردم.ممنون میشم اگر تجربه ای دارید مطرح بفرمایید:

reactjs - send a get http request by axios on react to laravel 10 backend on localhost - Stack Overflow

هادی قاسمیان قطب اباد ۱۲ خرداد ۱۴۰۲، ۰۸:۴۰

احتمالا کانفیگ هاتون کش شدن

این دستور رو در ترمینال بزنید:

php artisan config:clear
احمدرضا فاطمی کیا ۱۲ خرداد ۱۴۰۲، ۰۹:۲۰