Laravel API与Nuxt.js中PUT请求遭CORS策略拦截问题求助

我用Laravel API配合Nuxt.js开发应用，目前GET、DELETE、POST请求都能正常工作，但执行PUT请求时浏览器控制台报CORS错误，用Postman测试PUT请求完全正常。

浏览器控制台报错信息 #

Access to XMLHttpRequest at 'http://localhost:8000/api/movie' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

actualizar.vue?a2cc:70 Error: Network Error
at createError (createError.js?16d0:16:1)
at XMLHttpRequest.handleError (xhr.js?ec6c:84:1)

PUT http://localhost:8000/api/movie net::ERR_FAILED

当前Laravel项目的Cors中间件代码 #

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;

class Cors
{
   /**
    * Handle an incoming request.
    *
    * @param  \Illuminate\Http\Request  $request
    * @param  \Closure(\Illuminate\Http\Request): (\Illuminate\Http\Response|\Illuminate\Http\RedirectResponse)  $next
    * @return \Illuminate\Http\Response|\Illuminate\Http\RedirectResponse
    */
   public function handle(Request $request, Closure $next)
   {
       return $next($request)
      
  //Url a la que se le dara acceso a las peticiones
  ->header('Access-Control-Allow-Origin','*')
  //Métodos a los que se da acceso
  ->header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS")
  //Headers de la petición
  ->header("Access-Control-Allow-Headers",'*');

   }
}

问题原因 #

PUT属于非简单请求，浏览器会先发送OPTIONS预请求验证跨域权限。当前中间件先执行$next($request)再添加CORS头，导致OPTIONS请求被Laravel路由系统拦截（无对应路由），返回非200状态码，触发CORS错误。而GET/POST等简单请求无需预请求，因此能正常工作。

解决方案 #

1. 修改Cors中间件，优先处理OPTIONS请求 #

更新中间件代码，直接给OPTIONS预请求返回带CORS头的200响应：

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;

class Cors
{
    public function handle(Request $request, Closure $next)
    {
        // 直接处理OPTIONS预请求
        if ($request->isMethod('OPTIONS')) {
            return response()->json(['status' => 'ok'], 200)
                ->header('Access-Control-Allow-Origin', '*')
                ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
                ->header('Access-Control-Allow-Headers', '*');
        }

        return $next($request)
            ->header('Access-Control-Allow-Origin', '*')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
            ->header('Access-Control-Allow-Headers', '*');
    }
}

2. 确保中间件全局注册 #

打开app/Http/Kernel.php，将Cors中间件添加到$middleware数组中，确保所有请求都经过该中间件：

protected $middleware = [
    // ...其他已存在的中间件
    \App\Http\Middleware\Cors::class,
];

3. 清理Laravel缓存 #

执行以下命令刷新配置和路由缓存，确保修改生效：

php artisan config:clear
php artisan route:clear

完成以上步骤后，浏览器的OPTIONS预请求会得到正常的200响应，PUT请求就能顺利执行了。

内容的提问来源于stack exchange，提问作者Omar Elio Torres Castillo