AngularJS 和 Laravel CORS，预检选项后 POST 停止

Posted 2023-03-04

【中文标题】AngularJS 和 Laravel CORS，预检选项后 POST 停止

【英文标题】：AngularJS & Laravel CORS, POST stops after preflights OPTIONS

【发布时间】：2015-03-28 14:19:46

【问题描述】：

这是一只小鸟想为这个岗位工作，但在飞行前测试中失败的故事......

使用 Laravel 构建的应用程序被用作 RESTful API 和 AngularJS/ionic。 我的 API 调用工作正常，直到......由于未知原因它停止了。 尽管我为调用的 angularJS 端设置了 withCredentials，但预检选项没有发送 cookie，但我从 Laravel 收到了一个返回。我们如何禁用 OPTIONS 以返回 cookie laravel_session？ 它弄乱了 CORS，因为它设置了一个新会话，显然每个 POST 都会有所不同。 对于 Laravel 方面，我使用来自 @barryvdh 的 Laravel/CORS 包，配置如下：

 '*' => array(
'supportsCredentials' => true,
'allowedOrigins' => array('*'),
'allowedHeaders' => array('*'),
'allowedMethods' => array('POST', 'PUT', 'GET', 'PATCH', 'OPTIONS', 'DELETE'),
'maxAge' => 36000,
'hosts' => array('api.*'),
)

在 Angular 方面，我有以下内容：

$http(
method: 'POST',
url: 'http://api.blabla.local/banana',
data: data,
withCredentials: true
)

我的 GET 调用工作正常，我在应用程序启动时运行了一个从 laravel 获取 CSRF，并在需要时发回。

现在发生了以下情况： 1. Preflight OPTIONS > 请求没有会话的cookies。 Reponse = 200 使用不同的会话 cookie，这将导致 CSRF 一直触发。 [想法：withCredentials 不适用于 OPTIONS 调用] 2. POST > 失败并显示 500，在标题中我没有看到任何响应，但它确实发送了 cookie/会话 [想法：凭据已传递给它，但它们也是错误的，因为它们在服务器端由于预检选项而发生了变化]。错误消息说它不是授权来源。

发生了什么事？我已经尝试了几个小时并检查了很多其他帖子，但似乎没有任何帮助！我可以摆脱预检，如何？还是其他地方的问题（服务器端我正在使用 Laravel Homestead）？ 我觉得真正的问题是 OPTIONS 返回一个会话 cookie，或者只是请求确实包含一个！

感谢您的帮助，我已经被困了好几个小时了，我快要疯了...

【问题讨论】：

在发送 POST 之前，您是否在 AngularJS 中尝试过这个$httpProvider.defaults.useXDomain = true; delete $httpProvider.defaults.headers.common['X-Requested-With'];？

是的，我做到了，它没有改变任何东西。显然，自 1.11 以来，这在 Angular 中也已贬值，请参阅github.com/angular/angular.js/blob/master/CHANGELOG.md

那么我的猜测是这个问题更有可能在服务器端，不幸的是我没有使用 Laravel 的经验。

好的，谢谢。我要么需要 Angular 发送带有 OPTIONS 的 cookie，要么在发送 OPTIONS 调用时停止服务器端发送它

你找到解决办法了吗

【参考方案1】：

在 L4.2 下的 filters.php 中，我最终使用了这个： 问题很老，所以不确定这是我唯一做过的事情，但看起来像这样：

App::before(function($request)

    //
    // Enable CORS 
    // In production, replace * with http://yourdomain.com 
    header("Access-Control-Allow-Origin: http://mydomain.local");
    header('Access-Control-Allow-Credentials: true'); //optional
    if (Request::getMethod() == "OPTIONS") 
        // The client-side application can set only headers allowed in Access-Control-Allow-Headers
        $headers = [
            'Access-Control-Allow-Methods'=> 'GET, POST, PUT, DELETE',
            'Access-Control-Allow-Headers'=> 'Content-Type'
        ];
        return Response::make('You are connected to the API', 200, $headers);
    

);


App::after(function($request, $response)

    //
);

【参考方案2】：

JWT 可能对 ionic 和 angular.. 有好处。

检查http://packalyst.com/packages/package/tymon/jwt-auth 还有https://www.youtube.com/watch?v=vIGZxeQUUFU