Laravel 11升级后React前端API请求CORS错误求助

核心原因 #

Laravel 11重构了CORS配置逻辑，不再沿用Laravel 10中的config/cors.php配置文件，默认的跨域规则可能限制了前端请求的来源，导致原本正常的交互出现CORS错误。

解决步骤 #

1. 重新配置CORS规则 #

在bootstrap/app.php中找到应用实例配置代码，添加withCors方法定义允许的跨域规则：

return Application::configure(basePath: dirname(__DIR__))
    ->withRouting(
        web: __DIR__.'/../routes/web.php',
        api: __DIR__.'/../routes/api.php',
        commands: __DIR__.'/../routes/console.php',
        health: '/up',
    )
    ->withMiddleware(function (Middleware $middleware) {
        // 保留原有中间件配置
    })
    ->withCors(function (Cors $cors) {
        $cors->allowedOrigins(['http://your-react-frontend-url']) // 替换为你的React前端实际域名/端口
             ->allowedMethods(['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'])
             ->allowedHeaders(['*'])
             ->allowCredentials();
    })
    ->create();

2. 验证Axios客户端配置 #

确保Axios的baseURL指向正确的Laravel API地址，无跨域地址错误：

import axios from 'axios';

const apiClient = axios.create({
    baseURL: 'http://your-laravel-api-url/api', // 与后端API地址保持一致
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
    },
    withCredentials: true, // 若需传递Cookie则开启此项
});

export default apiClient;

3. 清除Laravel配置缓存 #

修改配置后执行以下命令，确保新配置生效：

php artisan config:cache
php artisan route:cache

4. 检查Signup组件请求代码 #

确认组件内的请求路径、方法无拼写错误：

import apiClient from './path-to-your-axios-client';

const handleSignup = async (formData) => {
    try {
        const response = await apiClient.post('/signup', formData);
        // 处理响应逻辑
    } catch (error) {
        console.error('注册失败:', error);
    }
};

额外注意事项 #

• 本地开发时，需将前端地址（如http://localhost:3000）加入allowedOrigins列表。
• 生产环境避免使用allowedOrigins(['*'])，应指定具体域名保障安全。

内容的提问来源于stack exchange，提问作者Arkar Tin Myint