Axios get request with CORS not working in laravel 5.5

Question

I'm using Reactjs with Laravel5.5 i'm working with League of legends API (Riot API), i want to send a get requests to retrieve some JSON data summoner name, summoner id etc... i tried to send a normal axios get request inside my app.js like this one:

axios.get('/url_of_api').then(function (response){
    console.log(response.data);
});

but i got this error:

ailed to load https://euw1.api.riotgames.com/lol/summoner/v3/summoners/by-name/skt%20ayech0x2?api_key=my_api_key: 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:8000' is therefore not allowed access. The response had HTTP status code 405.

Even i tried to add a custom header requests to my axios

let config = {
    headers: {
    "Origin": null,
     "Accept-Charset": "application/x-www-form-urlencoded; charset=UTF-8",
     "X-Riot-Token": "my_api_key",
     "Accept-Language": "en-US,en;q=0.5",
     "User-Agent": "Mozilla/5.0 (X11; Linux x86_64; rv:57.0) Gecko/20100101 Firefox/57.0"
    }
}
axios.post('url_of_api',config).then(function (response){
console.log(response.data);
});

I'm facing the same problem, but i found a solution with creating a new Laravel middleware and adding this code into it

<?php

 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');
 }
}

So with this route i get the response

Route::get('/lol', ['middleware' => 'cors', function()
{
$unparsed_json = file_get_contents("https://euw1.api.riotgames.com   /lol/summoner/v3/summoners/by-name/skt%20ayech0x2?api_key=my_api_key");
$json_object = json_decode($unparsed_json);
return response()->json($json_object);
 }]);

But i want to make it with axios please any suggest? thanks in advance guys.

Possible duplicate of Response to preflight request doesn't pass access control check — Robert

xDreamCoding xDreamCoding · Accepted Answer · 2017-11-24T10:42:41

Riot Games API v3 doesn't support CORS anymore.*

You will need to make those calls from your server.**

Axios get request with CORS not working in laravel 5.5

1 Answers