Не удалось выполнить запрос при использовании Ax ios в ReactJs и Laravel - PullRequest
Новая
       8

Не удалось выполнить запрос при использовании Ax ios в ReactJs и Laravel

1 голос
/ 22 февраля 2020

Я использую ReactJs в качестве внешнего механизма и обрабатываю запрос, используя Ax ios для получения данных из моей таблицы Post на Laravel. Я устанавливаю маршрут в 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 файл (приложение 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;

Снимок экрана с ошибкой:

enter image description here

Ответы [ 2 ]

0 голосов
/ 23 февраля 2020

Вы можете импортировать пакет laravel -cors через composer

В вашей консоли: composer require barryvdh/laravel-cors

Затем в вашем приложении / Http / Kernel. php добавьте это к промежуточному программному обеспечению или конкретно к API (только для laravel -корсов версии 1.0 и выше, я считаю) 

\Fruitcake\Cors\HandleCors::class,

или (0.11.3 в моем другом проекте) 

\Barryvdh\Cors\HandleCors::class,
0 голосов
/ 23 февраля 2020

Я решил свою проблему. Сначала я создаю Middleware, используя 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');
        }
    }
...