مشكلة Cors - Allow Cross origin
أهلا بيك
قابلتني مشكلة في مشروعين لما كنت بعمل api مع الـ Vue.js والـ Laravel
XMLHttpRequest cannot load http://site123.local. No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://site.local' is therefore not allowed access. The response had HTTP status code 500.
كنت شغال في المشروع الاول بشكل واحد
يعني الـ Vue.js والـ api في Laravel مع بعض
وكان حلها اني اعمل الـ middleware ده < Cors Middleware >
وعملت route group لل api وكل حاجة ظبطت < GET - POST , File Upload >
وده الكود الي انا استخدمته للـ middleware
namespace App\Http\Middleware;
use Closure;
class Cors {
public function handle($request, Closure $next)
{
return $next($request)
->header('Access-Control-Allow-Origin', '*')
->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
}
}
وطبعا مش هننسي نعرف الـ middleware في الـ kernel.php
protected $routeMiddleware = [......'cors' => \App\Http\Middleware\Cors::class, // <<< add this line];
واخيرا بقي, الـ route group
Route::get('', ['middleware' => 'cors', function() {
return 'You did it!';
}]);
------------------------
تعرف بقي ان فيه اكتر من باكيج عملت الـ middleware ده
ودي مثال ليها
ممكن تنزلها وتستخدمها - هتلاقي نفس الغرض
https://github.com/fruitcake/laravel-cors
-----------------------
ده كده الحل من Laravel لو الكود واحد
طيب لو الـ Vue.js منفصل عن الـ Laravel زي مشكلتي التانية لانها كانت ع الوضع ده هنعمل ايه؟؟
أكيد هنجرب الحل اللي احنا عملناه ده رقم 1
لان اصلا دي مشكلة سيرفر مش مشكلة الـ Vue بالرغم ان ممكن يكون منها ونحتاج نعمل اعدادات proxy مثلا فيها
او خلال الـ Development ممكن نستخدم الـ tool الجميلة اللي بتقدمها Herokuapp لحل المشكلة دي عندها
من خلال اني هضيف layer زيادة قبل الـ api url >> زي كده
https://cors-anywhere.herokuapp.com/https://site123.local/api/...
