在 ReactJs 和 Laravel 中使用 Axios 时请求失败

Question

我使用 ReactJs 作为我的前端引擎，我使用 Axios 处理请求以通过 Laravel 从我的 Post table 获取数据我在 api.php 中设置路由] 当我收到响应并且 console.log 它显示我的 chrome DevTool

访问 XMLHttpRequest 出错

api.php 文件:

<?php

use Illuminate\Http\Request;

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

我的控制器文件：

<?php

namespace App\Http\Controllers;

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

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

        return $post;
    }
}

我的 ReactJs 文件(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;

错误截图：

Answer 1

我解决了我的问题，首先我使用 php artisan make:middleware Cors 创建了一个中间件，然后 Cors class 应该是这样的：

    <?php

    namespace App\Http\Middleware;

    use Closure;

    class Cors
    {
        /**
         * Handle an incoming request.
         *
         * @param  \Illuminate\Http\Request  $request
         * @param  \Closure  $next
         * @return mixed
         */
        public function handle($request, Closure $next)
        {
            return $next($request)
->header('Access-Control-Allow-Origin', '*')
->header('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE, OPTIONS')
->header('Access-Control-Allow-HEaders', 'Content-Type, Authorization');
        }
    }

Answer 2

您可以通过 composer 导入 laravel-cors 包

在您的控制台中：composer require barryvdh/laravel-cors

然后在您的 app/Http/Kernel.php 中将其添加到中间件或专门添加到 api （我相信 laravel-cors 1.0 及以上版本）

\Fruitcake\Cors\HandleCors::class,

或（在我的其他项目中为 0.11.3）

\Barryvdh\Cors\HandleCors::class,

在 ReactJs 和 Laravel 中使用 Axios 时请求失败

Request failed when using Axios in ReactJs and Laravel

laravel

reactjs

laravel-5

axios

laravel-5.8