如何解决Laravel 10与NextJS之间的CORS跨域错误

针对你遇到的CORS问题，结合给出的配置文件，以下是具体修复步骤：

1. 移除路由上重复的CORS中间件 #

你在api.php中给/categories路由单独添加了HandleCors中间件，但Kernel.php的全局$middleware数组已经包含了这个中间件，重复添加会导致响应头重复，触发浏览器的CORS校验错误。直接去掉路由上的中间件：

// 修改前
Route::get("/categories", [NewsController::class, 'getCategories'])->middleware([\Illuminate\Http\Middleware\HandleCors::class]);

// 修改后
Route::get("/categories", [NewsController::class, 'getCategories']);

2. 调整CORS配置的路径匹配 #

你的axios请求路径是https://exampledomain.com/public/api/categories/，但当前config/cors.php的paths只配置了api/*，无法匹配带public前缀的路径。有两种解决方式：

• 推荐方案：修正服务器配置：将Laravel项目的public目录设为网站根目录（比如Nginx的root指向/path/to/laravel/public），这样请求路径可以简化为https://exampledomain.com/api/categories，无需带public，原CORS路径配置保持不变即可。
• 临时方案：修改CORS路径：如果暂时无法调整服务器，更新config/cors.php的paths：

'paths' => ['public/api/*', 'sanctum/csrf-cookie'],

3. 清除Laravel配置缓存 #

修改配置后必须清除缓存，确保新配置生效：

php artisan config:clear
php artisan route:clear

4. 检查axios请求的一致性 #

• 确认请求路径末尾的斜杠：你的路由定义是/categories，请求路径如果带末尾斜杠/categories/，Laravel默认会重定向，可能触发额外的OPTIONS请求，建议保持路径一致，去掉末尾斜杠。
• 如果需要携带凭证（如Cookie），在axios请求中添加withCredentials配置，同时确保config/cors.php的supports_credentials为true：

axios.get("https://exampledomain.com/api/categories", { withCredentials: true })

完成以上步骤后，重新测试请求，CORS错误应该就能解决。

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