Laravel Sanctum Vue SPA CORS issue

Question

我已经设置了一个VUE前端，它与Laravel后端连接和认证非常好，使用sanctum。我能够登录并通过访问/api/user成功检索登录的用户。我相信我已经遵循了文档中说明的所有配置步骤。以下是有状态域的sanctum.php配置:

'stateful' => explode(
',',
env(
'SANCTUM_STATEFUL_DOMAINS',
'localhost,localhost:3000,localhost:8080,127.0.0.1,127.0.0.1:8080,::1'
)
), //this is what is in my env SANCTUM_STATEFUL_DOMAINS=app.foo-bar.test:8080
//my laravel backend is running on foo-bar.test

这是我的session.php配置:

'domain' => env('SESSION_DOMAIN', null), //in my .env I have: SESSION_DOMAIN=.foo-bar.test

我有sanctum中间件设置在http/kernel.php，我使用auth:sanctum在我的路由

这是我的cors.php配置:

'paths' => ['api/*', 'sanctum/csrf-cookie', 'login', 'logout'],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => true,

，在我的vue前端，我配置axios使用下面的

axios.defaults.baseURL = 'http://foo-bar.test';
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
axios.defaults.withCredentials = true;

正如我提到的，我能够成功登录，甚至访问/api/user。一切正常，但是当我向:api/users/multiple发出post请求时，我得到CORS错误:在'http://foo-bar访问XMLHttpRequest。测试/api/users/multiple' from origin 'http://app.foo-bar。在请求的资源上没有"Access-Control-Allow-Origin"头文件

我没有主意了，因为我似乎已经做了所有必要的配置。也许我遗漏了什么?如有任何帮助，不胜感激。

亲切的问候

Answer 1

添加中间件

php artisan make:middleware Cors

在app/Http/kernel.php中粘贴到$middleware

protected $middleware = [  
AppHttpMiddlewareCors::class,
....
];

在Middleware/Cors.php中添加

public function handle(Request $request, Closure $next)
{
return $next($request)->header('Access-Control-Allow-Origin', '*')
->header('Access-Control-Allow-Methods','GET, POST, PUT, PATCH, DELETE, 
OPTIONS')
->header('Access-Control-Allow-Headers','Origin, X-Requested-With, Content- 
Type, Accept, Authorization');
}

Answer 2

我意识到这实际上不是CORS问题。如果这是一个CORS问题，我将无法登录，或访问返回当前登录用户的API。实际发生的情况是，chrome有时无法在API上报告500个错误，而是返回CORS错误。当我尝试在Firefox上调用API时，我能够看到500错误。一旦我解决了500错误，CORS错误也停止出现在chrome中。我从中看到的是，Firefox的网络请求错误报告比chrome更可靠