在Next.js搭配Laravel 10时遇到CORS错误

调整Laravel CORS配置 #

首先检查config/cors.php文件，默认配置可能未适配你的Next.js环境，按以下要求修改：

• allowed_origins：添加你的Next.js应用域名，开发环境可填['http://localhost:3000']，生产环境替换为实际域名；开发阶段可临时用['*']快速测试，但上线前必须改成具体域名。
• allowed_methods：确保包含GET和POST，直接设为['*']即可覆盖所有请求方法。
• allowed_headers：设为['*']，避免自定义请求头被拦截。
• supports_credentials：如果请求需要携带Cookie或认证信息，设为true。

修改后执行命令清除配置缓存：

php artisan config:clear

确认中间件注册 #

打开app/Http/Kernel.php，检查全局$middleware数组是否包含\Illuminate\Http\Middleware\HandleCors::class，如果没有则添加进去，确保所有请求都经过CORS处理逻辑。

检查Next.js端Axios配置 #

确保Axios的请求地址正确，且配置匹配后端要求：

import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'http://localhost:8000/api', // 替换为你的Laravel API实际地址
  withCredentials: true, // 仅当后端supports_credentials设为true时开启
});

// 示例GET请求
apiClient.get('/your-endpoint')
  .then(res => console.log(res.data))
  .catch(err => console.error(err));

// 示例POST请求
apiClient.post('/your-endpoint', { key: 'value' })
  .then(res => console.log(res.data))
  .catch(err => console.error(err));

排查额外冲突 #

• 生产环境下，避免服务器（Nginx/Apache）的CORS配置与Laravel配置冲突，优先保留Laravel的CORS中间件处理逻辑。
• 确认API路由没有额外的权限拦截中间件导致请求被提前拒绝，比如未正确配置的auth:sanctum等。

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