Vue-Laravel项目中PUT请求报Access-Control-Allow-Methods不允许错误

嘿，我之前也踩过这个CORS的坑！你遇到的问题核心是PUT请求属于非简单请求，浏览器会先发一个OPTIONS预检请求，检查服务器是否允许使用PUT方法，但你的自定义CORS中间件没处理这个OPTIONS请求，也没明确返回允许的HTTP方法列表，所以浏览器就报错了。

问题分析 #

你的CORS中间件只设置了Access-Control-Allow-Origin和Access-Control-Allow-Headers，但缺少两个关键配置：

• 没有处理OPTIONS请求的响应（预检请求是OPTIONS方法，需要直接返回200，不用走后续路由）
• 没有添加Access-Control-Allow-Methods头来指定允许的HTTP方法（比如PUT、DELETE这些）

修复方案：更新你的CORS中间件 #

把你的CORS中间件代码改成下面这样，专门处理OPTIONS请求并补充允许的方法：

// allowed client - now only for localhost vue cli
$domains = ['http://localhost:8080'];

if(isset($request->server()['HTTP_ORIGIN'])){
    $origin = $request->server()['HTTP_ORIGIN'];
    if(in_array($origin, $domains)){
        header('Access-Control-Allow-Origin: '.$origin);
        header('Access-Control-Allow-Headers: Origin, Content-Type, Authorization');
        // 添加允许的HTTP方法，包含PUT、GET、POST、DELETE等
        header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
        // 允许预检请求的缓存时间（可选，减少重复预检）
        header('Access-Control-Max-Age: 3600');
    }
}

// 如果是OPTIONS预检请求，直接返回200，不用走后续逻辑
if ($request->getMethod() == "OPTIONS") {
    return response('', 200);
}

return $next($request);

额外注意事项 #

• 确认Laravel路由配置：确保你的/api/photo/{id}路由确实是用Route::put定义的，比如：

  // routes/api.php
  Route::put('/photo/{id}', [PhotoController::class, 'update']);
  

  如果用资源路由的话，要确认update方法对应的是PUT请求：

  Route::resource('photo', PhotoController::class)->only(['update']);
  

• 浏览器缓存问题：有时候浏览器会缓存预检请求的结果，修改完中间件后可以清空浏览器缓存，或者强制刷新页面（Ctrl+Shift+R）再测试。
• 更省心的替代方案：如果不想自己维护CORS中间件，可以用Laravel社区成熟的包，比如barryvdh/laravel-cors，安装后配置好允许的域名和方法，就能自动处理所有CORS相关的问题。

你的客户端axios代码是没问题的，修改后端中间件后应该就能正常发送PUT请求了！

内容的提问来源于stack exchange，提问作者Parvej Ahammad