Laravel: Request failed when using Axios in ReactJs and Laravel

samedi 22 février 2020

Request failed when using Axios in ReactJs and Laravel

I using ReactJs as my front-end engine and I handle a request using Axios to get data from my Post table by Laravel I set route in api.php when I get a response and console.log it it shows Access to XMLHttpRequest at error at my chrome DevTool

api.php file:

<?php

use Illuminate\Http\Request;

Route::get('/', [
    'uses' => 'PagesController@getIndex'
]);

my controller file:

<?php

namespace App\Http\Controllers;

use App\Posts;
use Illuminate\Http\Request;

class PagesController extends Controller
{
    public function getIndex(){
        $post = Posts::all();

        return $post;
    }
}

my ReactJs file(App.js):

import React from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios';

class App extends React.Component{

    getData(){
        console.log(123);
        axios.get('http://localhost:8000/')
            .then(function (response) {
                console.log(response.data);
            }).catch(function (error) {
            // handle error
            console.log(error);
        });
    }

    render(){
        return (
            <div className="App">
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                    <p>
                        Edit <code>src/App.js</code> and save to amir.
                    </p>
                    { this.getData() }
                    <a
                        className="App-link"
                        href="https://reactjs.org"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        Learn React
                    </a>
                </header>
            </div>
        );
    }
}

export default App;

Error screenshot: