Laravel 否';访问控制允许原点';在React应用程序中。但它在刷新后消失
我正在制作一个简单的web应用程序,其中React作为前端,Laravel作为后端。我成功地从数据库中获取了数据,但当我将某些内容发布到数据库中时,我在控制台中收到错误消息: 对飞行前请求的响应未通过访问控制检查:否 “Access Control Allow Origin”标头出现在请求的服务器上 资源。因此,不允许访问源“null”。如果是不透明的 响应满足您的需要,将请求的模式设置为“无cors”以 获取禁用CORS的资源 奇怪的是,当我提交表单并刷新页面时,我的数据会显示出来 我的任务概述:Laravel 否';访问控制允许原点';在React应用程序中。但它在刷新后消失,laravel,reactjs,api,ecmascript-6,cors,Laravel,Reactjs,Api,Ecmascript 6,Cors,我正在制作一个简单的web应用程序,其中React作为前端,Laravel作为后端。我成功地从数据库中获取了数据,但当我将某些内容发布到数据库中时,我在控制台中收到错误消息: 对飞行前请求的响应未通过访问控制检查:否 “Access Control Allow Origin”标头出现在请求的服务器上 资源。因此,不允许访问源“null”。如果是不透明的 响应满足您的需要,将请求的模式设置为“无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>
)
}
}
我的路线
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中间件文件,其中包含此函数
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;
}
并将该类添加到my 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,
];
当我发布一个任务时,我无法弄清楚这个错误是如何出现在我的控制台中的,在我刷新页面后,错误将消失,任务将被添加
谢谢你的帮助 试试这个
$response->header('Access-Control-Allow-Headers', $request->header('Access-Control-Request-Headers','Origin,X-Requested-With,Content-Type,Accept, Authorization'));
您在哪里添加了
Cors
中间件?到kernel.php中的哪个数组?感谢您的快速响应!我已经添加了受保护的$middelware
$response->header('Access-Control-Allow-Headers', $request->header('Access-Control-Request-Headers','Origin,X-Requested-With,Content-Type,Accept, Authorization'));