Apache、Laravel 和 AngularJS 的 CORS 预检错误

Posted 2023-03-04

【中文标题】Apache、Laravel 和 AngularJS 的 CORS 预检错误

【英文标题】：CORS Preflight error with Apache, Laravel and AngularJS

【发布时间】：2016-09-06 00:00:24

【问题描述】：

我已经使用 Apache 服务器和来自 AWS 和 Laravel 的 AMI 实现了一个后端。对于身份验证，我使用 JWT Auth 插件。

我的前端是用 AngularJS 构建的。在使用身份验证之前，一切正常。当我尝试使用授权标头对用户进行身份验证时，出现 CORS 预检错误。我使用来自 AngularJS 应用程序的以下调用：

delete $http.defaults.headers.common['X-Requested-With'];
$http.defaults.headers.common.Accept = "text/plain";
$http(
    url: 'http://MYURL',
    method: "GET",
    headers: 
        'Access-Control-Allow-Headers': 'Authorization, Content-Type, Accept',
        'Content-Type' : 'text/plain',
        'Authorization': 'Bearer '+token,
    
 )

在我的 Laravel 后端中，我使用了以下配置：

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Authorization, Content-Type");

这是来自 OPTIONS 调用的响应：

这是我在 Google Chrome 中遇到的错误： 预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段授权。

对这个问题有什么想法吗？我是否必须在 Angular、Laravel 或我的 httpd.conf 中进行配置？

编辑：

我将它添加为全局中间件，并在 app.php 中作为服务提供者添加。 配置如下所示：

return [
    'supportsCredentials' => false,
    'allowedOrigins' => ['*'],
    'allowedHeaders' => ['Authorization, Content-Type'],
    'allowedMethods' => ['*'],
    'exposedHeaders' => [],
    'maxAge' => 0,
    'hosts' => [],
];

但我不知道它是否正常工作。

【参考方案1】：

您是否考虑过使用像 this one 这样的插件来管理 CORS 设置？

您在服务器端允许的标头列表 (Authorization, Content-Type) 似乎与请求发送的标头列表 (Authorization, Content-Type, Accept) 不同。可能是前端正在请求您在后端不允许的权限。

【讨论】：

我将其添加为全局中间件，并在 app.php 中作为服务提供者添加。请参阅我的问题中的编辑。