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

【问题标题】：Request failed when using Axios in ReactJs and Laravel在 ReactJs 和 Laravel 中使用 Axios 时请求失败
【发布时间】：2020-06-06 17:09:21
【问题描述】：

我使用 ReactJs 作为我的前端引擎，我使用 Axios 处理一个请求，以通过 Laravel 从我的 Post 表中获取数据我在收到响应时在 api.php 中设置路由，console.log 它显示访问 XMLHttpRequest在我的 chrome DevTool 出错

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;

错误截图：

【问题讨论】：

你可以试试。 itsolutionstuff.com/post/…

标签： reactjs laravel laravel-5 axios laravel-5.8

【解决方案1】：

你可以通过 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,

【讨论】：

【解决方案2】：

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

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

【讨论】：