Нет «Access-Control-Allow-Origin» в приложении React.Но это исчезает после обновления

Question

Я делаю простое веб-приложение в React в качестве front-end и Laravel в качестве Back-end.Мне удалось получить данные из базы данных, но когда я отправляю что-то в базу данных, в консоли я получаю сообщение об ошибке:

Ответ на предпечатный запрос не проходит проверку контроля доступа:В запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin».Происхождение 'null', следовательно, не разрешено.Если непрозрачный ответ удовлетворяет ваши потребности, установите режим запроса «no-cors», чтобы получить ресурс с отключенным CORS.

Странно, когда я отправляю форму и обновляю страницу, мои данные будут отображаться.

my React Task Overview:

import React from 'react';
import * as TaskService from '../_services/Tasks.Service';
import { TaskForm } from '../forms/TaskForm.Component';

export class TaskOverview extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            tasks: [],
        };
    }

    componentWillMount = () => {       
        TaskService.getAll().then(response => this.setState({ tasks: response }));
    }

    renderTasks = () => {
        let tasks   = this.state.tasks.map((task, i) => {
            return <li key={ i }>{ task.title }</li>
        });

        return tasks;
    }

    onFormSubmit = (data) => {
        TaskService.add(data);
    }

    render = () => {
        return (
            <div>
                <ul>
                    { this.renderTasks() }
                </ul>
                <TaskForm onSubmit={ this.onFormSubmit } />
            </div>
        )
    }
}

my React service

export const getAll = () => {
    return fetch('http://projects/_own/ToDoLoo/api/public/task-overview').then((response) => {
        if ( response.status === 200 ) {
            return response.json();
        }
        throw new Error('Network response was not ok.');
    })
}

export const add = (task) => {
    return fetch('http://projects/_own/ToDoLoo/api/public/task-add', { 
        method: 'POST',
        body: JSON.stringify(task),
        mode: 'cors', 
        headers: new Headers({
            'Content-Type': 'application/json',
        })
    }).then((response) => {
        if(response.statusText === 'OK') {
            return response.json();
        }
        throw new Error('Network response was not ok.');
    })
}

Мои маршруты

Route::get('/task-overview',    'TaskController@getTasks');
Route::post('/task-add',        'TaskController@addTask');

Мой контроллер

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Task;

class TaskController extends Controller
{
    public function getTasks () 
    {
        $tasks  = Task::all();
        return $tasks;
    }

    public function addTask (Request $request) 
    {
        $request->validate([
            'title'     => 'required|string',
            'body'      => 'required', 'string'
        ]);

        $task           = new Task;
        $task->title    = $request->title;
        $task->body     = $request->body;
        $task->user_id  = $request->user_id;
        $task->save();

        return back();
    }
}

Я также добавил отдельный файл Cors.php Middelware с этой функцией внутри

public function handle($request, Closure $next)
    {
        $response = $next($request);
        $response->header('Access-Control-Allow-Methods', 'HEAD, GET, POST, PUT, DELETE');
        $response->header('Access-Control-Allow-Headers', $request->header('Access-Control-Request-Headers'));
        $response->header('Access-Control-Allow-Origin', '*');
        return $response;
    }

и добавил его в мой kernel.php

protected $middleware = [
        \Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode::class,
        \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
        \App\Http\Middleware\TrimStrings::class,
        \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
        \App\Http\Middleware\TrustProxies::class,
        \App\Http\Middleware\Cors::class,
    ];

IНе могу понять, как эта ошибка появляется в моей консоли, когда я публикую задачу, и после обновления страницы ошибка исчезнет, ​​и задача будет добавлена.

Спасибо за вашу помощь!

Answer 1

попробуйте

$response->header('Access-Control-Allow-Headers', $request->header('Access-Control-Request-Headers','Origin,X-Requested-With,Content-Type,Accept, Authorization'));