在 React 应用程序中没有'Access-Control-Allow-Origin'。但刷新后消失

Question

我正在 React 中制作一个简单的 Web 应用程序作为前端，Laravel作为后端。我成功地从数据库中获取了数据，但是当我在数据库中发布某些内容时，我在控制台中收到错误消息：

对预检请求的响应未通过访问控制检查：否 "访问控制允许源"标头存在于请求的上 资源。因此，不允许访问源"空"。如果不透明 响应满足您的需求，将请求的模式设置为"no-cors"以 在禁用 CORS 的情况下获取资源。

奇怪的是，当我提交表单并刷新页面时，我的数据将显示出来。

我的反应任务概述：

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>
)
}
}

我的反应服务

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 AppHttpControllers;
use IlluminateHttpRequest;
use AppTask;
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;
}

并将类添加到我的内核中.php

protected $middleware = [
IlluminateFoundationHttpMiddlewareCheckForMaintenanceMode::class,
IlluminateFoundationHttpMiddlewareValidatePostSize::class,
AppHttpMiddlewareTrimStrings::class,
IlluminateFoundationHttpMiddlewareConvertEmptyStringsToNull::class,
AppHttpMiddlewareTrustProxies::class,
AppHttpMiddlewareCors::class,
];

当我发布任务时，我无法弄清楚此错误如何出现在我的控制台中，刷新页面后，错误将消失并添加任务。

感谢您的帮助！

Answer 1

试试这个

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