Laravel+React登录请求报错：api/Login路由不支持GET方法

问题核心 #

你遇到的两个错误是关联的：CORS跨域错误导致浏览器的预检请求失败，进而使实际请求被 fallback 为GET方法，触发Laravel路由的方法不允许错误。

分步解决方案 #

1. 配置Laravel跨域支持 #

Laravel默认不处理跨域请求，通过官方包快速解决：

• 安装CORS包：

composer require fruitcake/laravel-cors

• 发布配置文件：

php artisan vendor:publish --tag="cors"

• 修改config/cors.php，适配你的前端环境：

return [
    'paths' => ['api/*'], // 仅对API路由生效
    'allowed_methods' => ['*'], // 允许所有请求方法
    'allowed_origins' => ['http://localhost:3000'], // 替换为你的React项目地址
    'allowed_headers' => ['*'],
    'supports_credentials' => true, // 允许携带凭证（如Cookie）
];

• 在app/Http/Kernel.php的全局中间件中添加CORS处理：

protected $middleware = [
    // ...其他中间件
    \Fruitcake\Cors\HandleCors::class,
];

2. 校验Axios请求配置 #

确保axios-client.js的基础URL包含Laravel的API前缀：

import axios from 'axios';

const axiosClient = axios.create({
    baseURL: 'http://localhost:8000/api', // 必须包含/api，和Laravel路由前缀对应
    headers: {
        'Content-Type': 'application/json',
    },
    withCredentials: true, // 和CORS配置的supports_credentials保持一致
});

export default axiosClient;

3. 排查路由大小写一致性 #

Laravel路由默认大小写敏感，确认Axios请求的/Login和路由定义的Route::post('/Login')完全匹配。如果需要忽略大小写，可在app/Providers/RouteServiceProvider.php中添加：

public function boot()
{
    Route::pattern('*', '[a-zA-Z0-9-_]+');
    parent::boot();
}

4. 排除API路由的CSRF验证 #

API路由无需CSRF令牌，在app/Http/Middleware/VerifyCsrfToken.php中排除：

protected $except = [
    'api/*',
];

验证操作 #

1. 重启Laravel服务：php artisan serve
2. 重启React开发服务器
3. 打开浏览器控制台，检查网络请求：
   • 预检请求（OPTIONS）返回200状态码
   • 登录请求以POST方法正常发送，无CORS错误

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