React通过Axios请求Laravel API报404及CORS跨域错误求助

先排查404问题（核心前提） #

如果请求根本没到达Laravel的API路由，所有CORS配置都无效，先确认以下几点：

• 检查请求地址：前端Axios必须直接指向API的端口（8000），比如http://localhost:8000/api/xxx，而不是相对路径（相对路径会指向前端的80端口，找不到API路由）。
• 验证Laravel路由可达：直接在浏览器或Postman访问http://localhost:8000/api/你的POST路由，确认能返回正常响应（不是404）。如果这里就404，先修复Laravel的路由配置和Apache虚拟主机：
  • 确保Apache虚拟主机的DocumentRoot指向Laravel项目的public目录，且配置了AllowOverride All（让.htaccess生效）：

    <VirtualHost *:8000>
        DocumentRoot "/path/to/laravel/public"
        ServerName localhost
        <Directory "/path/to/laravel/public">
            AllowOverride All
            Require all granted
        </Directory>
    </VirtualHost>
    

  • 运行php artisan route:clear清除路由缓存，确保API路由生效。

修复CORS配置 #

1. Laravel官方CORS中间件配置 #

修改config/cors.php，开发环境下可以放宽限制：

return [
    'paths' => ['api/*'], // 匹配所有API路由
    'allowed_methods' => ['*'],
    'allowed_origins' => ['http://localhost'], // 前端的地址
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 3600,
    'supports_credentials' => true,
];

然后在app/Http/Kernel.php的$middlewareGroups['api']里添加HandleCors中间件：

'api' => [
    \Illuminate\Http\Middleware\HandleCors::class,
    'throttle:api',
    \Illuminate\Routing\Middleware\SubstituteBindings::class,
],

最后运行php artisan config:clear让配置生效。

2. Apache处理OPTIONS预检请求 #

浏览器会先发OPTIONS请求做预检，必须确保这个请求返回200，在Laravel的public/.htaccess或Apache虚拟主机里添加：

RewriteEngine On
# 处理OPTIONS请求
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

# 添加跨域头
Header set Access-Control-Allow-Origin "http://localhost"
Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
Header set Access-Control-Allow-Headers "Content-Type, Authorization"

注意：如果同时配置了Laravel的CORS中间件和Apache的头，确保两者的规则一致（比如allowed_origins相同），避免冲突。

3. Axios客户端配置 #

确保Axios的baseURL正确指向API端口，且请求头正确：

import axios from 'axios';

const api = axios.create({
    baseURL: 'http://localhost:8000/api',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
    },
});

// 如果需要带凭证（比如登录态），开启withCredentials
api.defaults.withCredentials = true;

export default api;

最后验证步骤 #

1. 重启Apache服务，确保配置生效。
2. 用浏览器开发者工具查看请求的Network面板：
   • 检查请求URL是否是http://localhost:8000/api/xxx。
   • 查看OPTIONS请求的响应头是否包含Access-Control-Allow-Origin。
   • 查看POST请求的状态码是否正常（不再404）。

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