You will get following errors when you test your REST API application with React, Vue.JS and angular
You will get following errors when you call the REST api
|
1 2 3 4 5 6 7 8 9 10 11 12 |
button_click2: function(){ this.$http.post('http://yourdomain.com/api/somemethod', { name: "John", time: "2pm" }) .then(function(response) { alert( "Data Loaded: " + response ); console.log(response); // success }, function(response) { alert( "Data Loaded: " + response ); console.log(response); }); } |
Failed to load http://yourdomain.com/api/somemethod Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3333’ is therefore not allowed access.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://yourdomain.com/api/somemethod. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
To solve this issue in Laravel you can create middleware
|
1 |
php artisan make:middleware CORSMiddleware |
Now you can add following code to App\Http\Middleware\CORSMiddleware
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<?php namespace App\Http\Middleware; use Closure; class CORSMiddleware { /** * Handle an incoming request. * * @param \Illuminate\Http\Request $request * @param \Closure $next * @return mixed */ public function handle($request, Closure $next) { if ($request->getMethod() === "OPTIONSS") { return response('') ->header('Access-Control-Allow-Origin', '*') ->header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT, DELETE') ->header('Access-Control-Allow-Headers', 'Content-Type, X-Auth-Token, Origin'); } return $next($request); } } |
In your App\Http\Kernel.php you can add the following code
|
1 2 3 4 5 6 7 8 9 10 11 |
protected $middlewareGroups = [ 'web' => [ ....... ], 'api' => [ 'throttle:60,1', 'bindings', \App\Http\Middleware\CORSMiddleware::class, ], ]; |
Now you can call the REST API from your javascript code without any issue