React 应用程序和 Laravel API 的 CORS 问题

Question

我有一个位于http://localhost:3000/的 React 应用程序， 而 Laravel API 位于http://localhost/blog/public/api/我收到以下错误从源 ' http://localhost:3000 '获取在 ' http://localhost/blog/public/api/auth/signin '的访问已被 CORS 策略阻止：没有 'Access-Control-Allow-Origin' 标头存在于请求的资源上。如果不透明响应满足您的需求，请将请求的模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。这是响应标头：-我尝试通过 htaccess，https: //packagist.org/packages/barryvdh/laravel-cors

Answer 1

下面的解决方案应该解决 Laravel 中与 CORS 相关的问题。

Step1：创建一个新的中间件

‘Php artisan make:middleware cors’

第2步：

把下面的放在创建的中间替换handle方法

    public function handle($request, Closure $next) {

   

    return $next($request)

      ->header('Access-Control-Allow-Origin', '*')

      ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')

      ->header('Access-Control-Allow-Headers',' Origin, Content-Type, Accept, Authorization, X-Request-With')

      ->header('Access-Control-Allow-Credentials',' true');

}

第 3 步：

然后转到 Kernel.php 文件并将其添加到应用程序的全局 HTTP 中间件堆栈下。

ps 只添加了带有注释的最后一行，其他行之前存在。

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 added here 

 ];

享受！