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

Posted 2023-02-22

【中文标题】React 应用程序中没有“Access-Control-Allow-Origin”。但是刷新后消失

【英文标题】：No 'Access-Control-Allow-Origin' in React app. But is disappears after refresh

【发布时间】：2018-11-09 21:15:18

【问题描述】：

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

对预检请求的响应未通过访问控制检查：否 请求中存在“Access-Control-Allow-Origin”标头 资源。因此，Origin 'null' 不允许访问。如果一个不透明 响应满足您的需求，将请求的模式设置为“no-cors”以 获取禁用 CORS 的资源。

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

我的 React 任务概览：

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

我的 React 服务

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,
    ];

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

感谢您的帮助！

【问题讨论】：

你在哪里添加了Cors 中间件？ kernel.php 中的哪个数组？

感谢您的快速回复！我已经添加了受保护的 $middelware

【参考方案1】：

试试这个

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